Animations

CSS animations

CSS animations are a great way to animate CSS properties from one to another. While we can use transitions to perform single movements, animations give us much finer control.

Some common properties we might animate include colors (color and background-color) and numbers (height and width).

Creating an animation

An animation consists of a style rule that describes the animation and a set of keyframes indicating the start and end states of that style. We can also optionally add waypoints.

Let’s take a look at an example: