CSS3: The Missing Manual, 3rd Edition

Chapter 10. CSS Transforms, Transitions, and Animations

For the short history of the web, designers have had few options for adding animation to their websites. The humble, goofy-looking animated GIF provides basic animation within an image. Adobe’s Flash program lets you create complex animations, and even games and web applications, but its learning curve is steep, and it can’t interact with the other HTML on your page, like the images, headlines, and paragraphs that make up most web content. JavaScript lets you animate anything on a web page, but at the cost of learning a full-fledged programming language. Fortunately, CSS3 provides a way to move, transform, and animate any HTML element on a page, without resorting to any of those other technologies.

Transforms

CSS3 introduces several properties that transform a web page element, by either rotating it, scaling it, moving it, or distorting it along its horizontal and vertical axes (a process called skewing). You can use a transform, for example, to provide a slight tilt (rotation) to a navigation bar, or make an image get twice as big when a visitor mouses over it. You can even combine multiple transformations for some wild visual effects.

The basic CSS property to achieve any of these changes is the CSS transform property. You use this property by supplying the type of transformation you want and a value indicating how much to transform the element. For example, to rotate an element, you supply the keyword rotate, followed by the ...