O'Reilly logo

CSS: The Missing Manual, 4th Edition by David Sawyer McFarland

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required