CSS Master

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