How does Animations work in CSS?

[board-infinity]

CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.

To create a CSS animation sequence, you style the element you want to animate with the animation property or its sub-properties. This lets you configure the timing, duration, and other details of how the animation sequence should progress. This does not configure the actual appearance of the animation, which is done using the @keyframes at-rule as described in Defining the animation sequence using keyframes below.

The sub-properties of the animation property are:

animation-name:

Specifies the name of the @keyframes at-rule describing the animation’s keyframes.

animation-duration:

Configures the length of time that an animation should take to complete one cycle.

animation-timing-function:

Configures the timing of the animation; that is, how the animation transitions through keyframes, by establishing acceleration curves.

animation-delay:

Configures the delay between the time the element is loaded and the beginning of the animation sequence.

animation-iteration-count:

Configures the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely.

animation-direction:

Configures whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself.

animation-fill-mode:

Configures what values are applied by the animation before and after it is executed.

animation-play-state:

Let you pause and resume the animation sequence.