animation-play-state

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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

Try it

animation-play-state: paused; 
animation-play-state: running; 
<section class="flex-column" id="default-example">   <div class="animating" id="example-element"></div> </section> 
#example-element {   background-color: #1766aa;   color: white;   margin: auto;   margin-left: 0;   border: 5px solid #333;   width: 150px;   height: 150px;   border-radius: 50%; }  .animating {   animation-name: slide;   animation-duration: 3s;   animation-timing-function: ease-in;   animation-iteration-count: infinite;   animation-direction: alternate; }  @keyframes slide {   from {     background-color: orange;     color: black;     margin-left: 0;   }   to {     background-color: orange;     color: black;     margin-left: 80%;   } }

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

css
/* 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: revert; animation-play-state: revert-layer; animation-play-state: unset;

Values

running

The animation is currently playing.

paused

The animation is currently paused.

Note: When you specify multiple comma-separated values on an animation-* property, they are applied to the animations in the order in which the animation-names appear. For situations where the number of animations and animation-* property values do not match, see Setting multiple animation property values.

Formal definition

Initial valuerunning
Applies toall elements, ::before and ::after pseudo-elements
Inheritedno
Computed valueas specified
Animation typeNot animatable

Formal syntax

animation-play-state = 
  <single-animation-play-state>#  

<single-animation-play-state> = 
  running  |
  paused

Examples

Pausing an animation

This animation is paused, but runs when you hover over it.

HTML

html
<div class="box"></div>

CSS

css
.box {   background-color: rebeccapurple;   border-radius: 10px;   width: 100px;   height: 100px;   animation-name: rotate;   animation-duration: 0.7s;   animation-iteration-count: infinite;   animation-play-state: paused; }  .box:hover {   animation-play-state: running; }  @keyframes rotate {   0% {     transform: rotate(0);   }   100% {     transform: rotate(360deg);   } }

Result

Hover over the rectangle to play the animation.

See CSS animations for examples.

Specifications

Specification
CSS Animations Level 1
# animation-play-state

Browser compatibility

See also