The idea of using CSS as an animation tool has actually been around for a while. It is just now that browsers are starting to catch up. Soon enough CSS3 keyframe animation will have a big impact on web design.
The benefits of using CSS3 keyframe animation is that developers can create smooth motion that is not too resource heavy without an enormous amount of scripting. Combined with other useful CSS3 advances like rounded corners, gradients, and shadows one could potential create small user-friendly animations that rival the ones currently being made using flash or java-script. As a matter of fact combining CSS3 and java-script opens the realms of possibility even farther.
CSS3 and especially CSS3 animation do not yet have wide browser support so this article is intended as more of an introduction to the future not a what to do now.
You can find more information about CSS3 keyframe animation here.
Simple CSS3 Keyframe Animation
For this exercise I created a quick scene that changes from dawn to night. The background color transitions from orange to blue to purple to grey. Each time of day has its own title and the title is brought to the forefront at the right time.
Take a look at the Demo here.(This Demo requires a newer browser. Safari 5, Firefox 5, Chrome, IE 9. For the rest of the tutorial I will leave out the browser rendering engines. Just recognize that they are necessary for now. If you have no idea what I am talking about I suggest a little research before moving forward.)
The Basics
As always we start with clean mark up. You can see that inside our container we have a div with an id of ‘sky’ and inside that a div with an id of ‘sun_contain’. The sky is the colored background and our sun is represented by the titles. Inside out ‘sun_contain’ is four other divs labeled for the time of day.
The CSS
There are a couple of things that make this work. The first thing is the @keyframe rule. A specific identifier is placed after each @keyframe that is referred to in the next part. Inside the the @keyframe and identifier are where you place the rule sets. The rule sets include the keyframe selectors which are snapshots of the animated elements. Just as in flash 0%, 33%, 66%, and 100% would be keyframes to which the CSS will tween. Each keyframe snapshot can have different styles associated with it like position, background color, and text color.
So, to define four times of day I have set four keyframes for each element(sky, sun_contain, dawn, day, dusk, night).
The next part are the animation properties. The first one the animation name is where we call our unique identifier from earlier.
The rest of the properties tell the animation ways to act like duration, delay, and play state.
The Conclusion
The W3C lays out what each of the animation properties are used for here. Remember this is still in early development and some browsers like Firefox 4 or lower won’t do anything with this. This is coming down the line. One can imagine all of the fun stuff that can be created with this ability.
On a side note you can see that I am using Google Fonts which is pretty awesome in itself.
Ryan Shuhart
Sr. Web Developer – Tranquilblue
May 6, 2013
