O'Reilly logo

CSS Master by Tiffany B Brown

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 5 Transitions and Animation

Now that we’ve covered some advanced CSS layouts, let’s look at how to add some whimsy, delight, and polish to our documents with CSS transitions and animations. Transitions and animations can often clarify the effect of an action. A menu that slides into view, for example, is less abrupt and jarring than one that appears suddenly after a button is clicked. Transitions and animations can also draw attention to a page change or problem. You might, for instance, transition the border color of a form field to highlight that its value is invalid.[18]

This is probably a good time to explain how animations and transitions differ. With a transition, you define start and end states, and the browser fills in ...

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