17 Animations
This chapter covers
- Adding complex motion to the page with keyframe animations
- Playing animations when the page loads
- Using a spinner animation to provide feedback
- Drawing attention to a Save button to remind the user to save
In the previous two chapters, you built several transitions that moved elements from one state to another. This brings motion to the page and visual interest to the user experience. But sometimes a transition isn’t enough.
Instead of transitioning directly from one place to another, you might want an element to take a roundabout path along the way. Other times, you might want to animate an element and have it end up back where it started. These things can’t be done with a transition. For more explicit control over changes on the page, CSS offers keyframe animation.
A keyframe refers to a specific point in an animation. You define some number of keyframes, and the browser fills in, or interpolates, all the frames in between (figure 17.1). These interpolated frames will have values in between those of the keyframes, so the value changes smoothly from one keyframe to the next.
Figure 17.1 You define the keyframes, and the browser interpolates all the frames in between.
