CSS3 Pushing the Limits

Chapter 8

Getting Animated

Transitions are great for simple, trigger-based animation between two states, but they obviously don't provide a solution for true frame-based animation. Fortunately, CSS-based animation doesn't stop with transitions; it gets a whole lot more exciting than that! I mentioned the completely separate CSS Animations module a couple of times in the preceding few chapters, alluding to its impressive capabilities and suggesting that it belongs alongside the more powerful tools that CSS3 has to offer. I hope this chapter will serve to justify those claims.

As I touched on in the preceding chapters, transitions are effectively limited to two frames, a start and an end, with the change between these states occurring gradually. CSS Animations, on the other hand, introduces keyframes into the equation, allowing you to add any number of state changes to animate between.

This module is big news for CSS and finally provides an extremely author-friendly method of applying both simple and complex animation, without having to rely on JavaScript and Flash as you have done for so long. This reliance has been particularly frustrating when the desired effect is a simple one, often resulting in the feeling that it's not worth the effort. Thankfully, you now have a solution that requires a number of bytes appropriate to the outcome.

This chapter discusses the intricacies of CSS Animations, breaking down the module and discussing the various controls in depth. I then show how ...