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


Formal syntax: <single-animation-play-state>#
animation-play-state: running
animation-play-state: paused
animation-play-state: paused, running, running


The animation is currently playing.
The animation is currently paused.


See CSS animations for examples.


Desktop browsers

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support (Yes)-webkit5.0 (5.0)-moz
16.0 (16.0)
1012 -o

Mobile browsers

FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support (Yes)-webkit5.0 (5.0)-moz
16.0 (16.0)

Relative articles