Author:

Pixel pusher by day, illustrator by night. Tom is a lead designer and when he isn't ruining his eyes in front of the computer, he'll be ruining them in front of a games console.

Twitter: Follow Tom Waterhouse on Twitter

The Guide To CSS Animation: Principles and Examples

With CSS animation now supported in both Firefox and Webkit browsers, there is no better time to give it a try. Regardless of its technical form, whether traditional, computer-generated 3-D, Flash or CSS, animation always follows the same basic principles.

Example illustration showing the different frames in traditional animation to make a bouncing ball

In this article, we will take our first steps with CSS animation and consider the main guidelines for creating animation with CSS. We’ll be working through an example, building up the animation using the principles of traditional animation. Finally, we’ll see some real-world usages.

Read more...

↑ Back to top