CSS Animations and Transitions for the Modern Web

Chapter 4. Animations

CSS transitions offer you a way to create simple animations that always start as the result of triggering a CSS property change. Transitions can animate only between a start and end state, and each state is controlled by existing CSS property values. For example, a transition that runs on hover transitions between values on the element and values on the hover state of the element. Overall, transitions are a simple way to animate but offer little control over the animation.

CSS animations provide a bit more control. They allow for the creation of multiple keyframes (FIGURE 4.1) over which the animation occurs. While they can start in reaction to a change in CSS property value, they can also run on their own. An animation ...