The animation-play-state property defines whether the animation is running or paused. A running animation can be paused by setting this property to 'paused'. To continue running a paused animation this property can be set to 'running'. A paused animation will continue to display the current value of the animation in a static state, as if the time of the animation is constant. When a paused animation is resumed, it restarts from the current value, not necessarily from the beginning of the animation.

  • Initial valuerunning
  • Applies toAll elements, :before and :after pseudo elements
  • InheritedNo
  • MediaVisual
  • Computed valueAs specified
  • AnimatableNo
  • CSS VersionCSS3
  • JavaScript
Formal syntax: <single-animation-play-state> [ ',' <single-animation-play-state> ]*

animation-play-state: running;
animation-play-state: paused;
<single-animation-play-state> = running | paused
  • runningThe animation is currently playing.
  • pausedThe animation is currently paused.
.class {
   animation-play-state: running;

Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.