CSS: The Definitive Guide, 4th Edition

Chapter 18. Animation

CSS transitions, covered in the previous chapter, enabled simple animations. With transitions, an element’s properties change from the values set in one rule to the values set in a different rule as the element changes state over time, instead of changing instantly. With CSS transitions, the start and end states of property values are controlled by existing property values, and provide little control over how things change over time.

CSS animations are similar to transitions in that values of CSS properties change over time, but provide much more control over how 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 values changes, animations are explicitly executed when animation keyframe properties 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, with transitions, going from black to white will only animate 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. ...