Transitions and Animations in CSS

Chapter 3. Animation

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

CSS animations are similar to transitions in that values of CSS properties change over time. But transitions only let us animate from an initial value to a destination value and back again. CSS keyframe animations let us decide if and how an animation repeats and give us granular control over what happens throughout the animation.

CSS animation lets us animate the values of CSS properties over time using keyframes. Similar to transitions, animation provides us with control over the delay and duration. With CSS animations, we can control the number of iterations, the iteration behavior, what happens before the first animation commences, and the state of animated properties after the last animation iteration concludes. CSS animation properties allow us to control timing and even pause an animation mid-stream.

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