To get a sneak peek at what we’ll be building today, click on the link below.

Live Demo: Click Here


Keyfame Animations: Still Just for Fun

With CSS3, it’s easy enough to have one color fade into another, say on a hover command. Set two different colors, toss in a transition and you’re good to go. But what if we want to have something that continually changes colors? The answer lies in keyframes.

Currently, support for keyframe animations in CSS is quite low. In fact, you can really only bank on it working in Webkit browsers like Safari and Chrome (Firefox 5 should see support as well). So the unfortunate part is that, as with many CSS3 tricks, this isn’t quite ready to use in production unless you’re fully prepared for a large number of your users missing out on the experience.

How Keyframes Work

Keyframe animations are one of the more complicated new features of CSS. In fact, it feels a bit more like programming than styling, even to the point of almost declaring a variable! Let’s do a quick and dirty run through to see how they work.

The first thing you want to do is declare the webkit keyframe block and name your animation.

@-webkit-keyframes animationName {