15 Transitions
This chapter covers
- Bringing motion to the page with transitions
- Understanding timing functions and choosing the right one
- Coordinating with JavaScript
In traditional print media, things are static. Text cannot move around on paper; colors cannot shift. But the web is a living medium, where we can do so much more. You can add motion and change to the page, and the easiest way to do any of this is with transitions.
With a CSS transition, you can tell the browser to “ease” one value into another when the value changes. For example, if you have blue links with a red hover state, a transition will cause the link to blend from blue through purple to red when the user mouses over—and back again when the user moves the mouse away. Used correctly, transitions can enhance the interactive feel of the page and, because our eyes are drawn to motion, can bring the user’s attention to a change as it occurs.
Often, transitions can be added to the page with little effort. In this chapter, we’ll look at how that’s done, along with some of the decisions you’ll have to make in the process. Some use cases can get a bit more complicated, so we'll take a look at a number of various scenarios.
15.1 From here to there
Transitions are done with the transition-* family of properties. If these are applied to an element while one of its property values changes, then that property will transition smoothly instead of changing immediately to the new value.