animation-play-state

The animation-play-state CSS property sets whether an animation is running or paused.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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: inherit;
animation-play-state: initial;
animation-play-state: unset;

Values

running

The animation is currently playing.

paused

The animation is currently paused.

Formal definition

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