If web design was cake, parts of CSS3 would be the icing, especially animations and transitions which are only currently supported by webkit browsers. But that’s no reason to ignore them. They are just the right thing to easily add that little bit of surprise to your design.
I wanted to add a subtle bit of animation to a design I have in the works and I was psyched to find a really easy way to do it with CSS3. (Something that’s going to look cool and an excuse to play with something new – bonus!) The goal was to have a small graphic change colour slowly over time. Subtle, and possibly unnoticed by most people, but also really fun.
As usual, I started with a quick dummy example, and I ended up building it two ways: once with CSS3 and once with jQuery. Both examples have the same basic structure: a knocked out skull illustration layered on top of a gradient image. It’s what makes them move that differs.
The CSS3 Version…
CSS3 animation is amazingly easy. Really. Almost too easy. Really.
Here’s the CSS that does the heavy lifting:
[css]
.skullgraid {
width:99px;height:92px; margin-left:1px;
background: transparent url(big_ass_gradient.jpg) repeat;
-webkit-animation-name: skullback;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 15s;
-webkit-animation-iteration-count: infinite;
position: relative;
z-index: -1;
}
@-webkit-keyframes skullback {
0% {
background-position: left top;
}
100% {
background-position: right top;
}
}
[/css]
Check out the working example. (Webkit browsers only.)
The JavaScript Version
My original plan was to stop right there. Just a subtle little bit of motion that only a few users even have the right browser to see. Like I’m passing a little secret animated note. Perfect.
But then I wondered what if I wanted to use this technique *and* have more than just a couple of browsers know what to do with it. How hard would it be to just toss in a little jQuery to take care of the same thing? Not hard at all.
The jQuery that does the heavy lifting:
[javascript]
function animateMyImage() {
//graident is 824px wide
$(".skullgraid").animate({
backgroundPosition: "-=824px 0px"},
20000, function(){
animateMyImage();
});
};
[/javascript]
Check out the working example.
Handy Resources
There has been a lot of internetting behind my current CSS3 experimenting, here’s a few that were particularly helpful:
Snook.ca background image animations
CSS3 Keyframe animation syntax
For animating with jQuery, the jQuery site has tons of info and examples
HT to Trent Walton as I first saw a similar CSS3 animation on his post a few months back. Of course I completely forgot about that until I started writing this post… Could have saved myself some time if I’d remembered sooner! His post is a great read on CSS3 animations & transitions in practice.
