`animation-play-state` CSS property

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.

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.

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 #333333;
  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%;
  }
}

Syntax

/* 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

This property is specified as a comma-separated list of the following keyword 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 value	running
Applies to	all elements, `::before` and `::after` <a href="/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements">pseudo-elements</a>
Inherited	no
Computed value	as specified
Animation type	Not 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

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

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

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`animation-play-state`	43 3	12 12	16 49 5	30 15 12.1–15 12–15	9 4	43 18	16 49 5	30 14 12.1–14 12–14	9 2	4.0 1.0	43 4.4	9 2
`paused`	3	12	5	15	4	18	5	14	3.2	1.0	4.4	3.2
`running`	3	12	5	15	4	18	5	14	3.2	1.0	4.4	3.2