# CSS Animation

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.

# Keyframes

The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than transitions.

# Animation Properties

The purpose the animation properies is not describe the appear of the animation, that is the job of the @keyframes CSS at-rule, but to describe how those rules should be applied on the target elements.

The following properties can be used:

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

# animation-play-state

Lets you pause and resume the animation sequence.

# Shorthand Usage