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

17.1 Keyframes

17.2 Animating 3D transforms

17.2.1 Building the layout without animations

17.2.2 Adding animation to the layout

17.3 Animation delay and fill mode

17.4 Conveying meaning through animation

17.4.1 Responding to user interaction

17.4.2 Drawing the user’s attention

17.5 Scroll-based timelines

17.6 One final piece of advice

Summary