animation-play-state

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

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

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

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

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

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
• JavaScript AnimationEvent API