CSS: The Missing Manual, 4th Edition

Chapter 10. CSS Transforms, Transitions, and Animations

For the short history of the Web, designers have had a few options for adding animation to their websites. The humble, goofy-looking animated GIF is perhaps the simplest way to provide basic animation within an image. Adobe Flash was once the number one tool for creating complex animations, and even games and web applications, but it has a number of drawbacks: Its learning curve was steep; it can’t interact with the other HTML on your page, like the images, headlines, and paragraphs that make up most web content; and because Flash isn’t available on many mobile devices, it’s no longer as popular as it once was. JavaScript lets you animate anything on a web page, but at the cost of learning a full-fledged programming language. Fortunately, CSS provides a way to move, transform, and animate any HTML element on a page, without resorting to any of these other technologies.

Transforms

CSS includes 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 ...