animation-play-state

Summary

The animation-play-state CSS property determines whether an animation is running or paused. This can be queried to determine whether or not the animation is currently running. In addition, its value can be set to pause and resume playback of an animation.

Resuming a paused animation will start the animation from where it left off at the time it was paused, rather than starting over from the beginning of the animation sequence.

Syntax

/* Single animation */
animation-play-state: running;
animation-play-state: paused;

/* Multiple animations */
animation-play-state: paused, running, running;

/* Global values */
animation-play-state: inherited;
animation-play-state: initial;
animation-play-state: unset;

Values

running

The animation is currently playing.

paused

The animation is currently paused.

Formal syntax

<single-animation-play-state>#
where 
<single-animation-play-state> = running | paused

Examples

See CSS animations for examples.

Specifications

Browser compatibility

See also

• Using CSS animations
• AnimationEvent