Animation with CSS3: It's Easier Than You Think

When we combine movements (transforms) of inanimate objects over different timeframes (transitions) we get animation. CSS3 expands on what’s possible with transforms and transitions with the aptly named animations module and Steven Bradley would like to spend some time today looking through that module. He created a simple animation demo to go along with this post. By no means is this award winning animation. In fact it’s pretty cheesy, but hopefully it illustrates how to work with animation.

Browser support for animation is limited to Webkit browsers like Safari and Chrome as well as Firefox. Animation is coming to IE10 and as of now there’s unknown support in Opera. For now you also need to use vendor prefixes, though he won’t be showing the prefixes in this post.