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. Elements can fade out. Menus can slide in. Colors can shift from one value to another, and the easiest way to do any of these 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’ve 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. Because there’re some use cases where things can get a bit more complicated, we’ll also take a look at how to address those issues.