CSS: The Definitive Guide, 5th Edition

Chapter 19. Animation

CSS transitions, covered in the previous chapter, enable simple animations that are triggered by changes in the DOM state and proceed from a beginning state to an end state. CSS animations are similar to transitions in that values of CSS properties change over time, but animations provide much more control over the way those changes happen. Specifically, CSS keyframe animations let us decide if and how an animation repeats, give us granular control over what happens throughout the animation, and more. While transitions trigger implicit property value changes, animations are explicitly executed when keyframe animations are applied.

With CSS animations, you can change property values that are not part of the set pre- or post-state of an element. The property values set on the animated element don’t necessarily have to be part of the animation progression. For example, when using a transition, going from black to white will animate only through various shades of gray. With animation, that same element doesn’t have to be black or white or even in-between shades of gray during the animation.

While you can transition through shades of gray, you could instead turn the element yellow, then animate from yellow to orange. Alternatively, you could animate through various colors, starting with black and ending with white, but progressing through the entire rainbow along the way.

Tip

Look for the Play symbol to know when an online example is available. All of the examples ...