C H A P T E R  23

Transitions, Animations, and Transforms

In this chapter, I introduce three different ways that you can apply simple special effects to HTML elements: transitions, animations, and transforms. I’ll explain and demonstrate each of these terms later in the chapter. All three features are new in CSS3 and, as I write this, are supported only through browser-specific prefixes. This is something I expect to change reasonably quickly, because these features are going to be extremely popular with web designers and developers.

Applying effects to HTML elements isn’t a new idea, and most of the good JavaScript libraries available contain at least a few of the effects that are now rolled into CSS3. The advantage of using CSS3 over JavaScript is performance. Much of the new functionality is about changing the value of CSS properties over time, and this is something that can be handled with less overhead directly in the browser engine. Despite this, these effects (even the basic ones) can take a lot of processing power, especially on complex web pages. For this reason, you should use the effects I describe in this chapter sparingly. Causing the user’s computer to grind to a halt is always unwelcome, especially if you are just showing off your animation skills.