animation-play-state property

Definition and Usage

The animation-play-state CSS property determines whether an animation is running or paused. You can query this property’s value to determine whether or not the animation is currently running; in addition, you can set its value 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.

• Initialrunning
• Applies toall elements, ::before and ::after pseudo-element
• Inheritedno
• Mediavisual
• Computed Valueas specified
• Animatableno
• Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

Formal syntax: <single-animation-play-state>#

animation-play-state: running
animation-play-state: paused
animation-play-state: paused, running, running

Values

running

The animation is currently playing.

paused

The animation is currently paused.

Examples

See CSS animations for examples.

Compatibility

Desktop browsers

Mobile browsers