animation-play-state property CSS Reference

---

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.

• Initial running
• Applies to all elements, ::before and ::after pseudo-element
• Inherited no
• Media visual
• Computed Value as specified
• Animatable no
• Canonical order the 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