X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS animation-play-state Property

CSS animation-play-state property specifies if the animation is running or it is paused. If you resume a paused animation it will start from where it was left off at the time it was paused, rather than starting from the beginning of the animation sequence. Also, you can run the animation from paused state.

Initial Value running
Applies to All elements. It also applies to ::before and ::after pseudo-elements.
Inherited No.
Animatable No.
Version CSS3
DOM Syntax object.style.animationPlayState = "paused";

Syntax

animation-play-state: paused | running | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 150px;
      height: 150px;
      background: #ccc;
      position: relative;
      animation: play 10s;
      animation-play-state: running;
      }
      @keyframes play {
      from {left: 0px;}
      to {left: 200px;}
      }
    </style>
  </head>
  <body>
    <h2>Animation-play-state example</h2>
    <p>Here the animation-play-state is set to "running".</p>
    <div></div>
  </body>
</html>

Here see an example where the "paused" value is used. The animation will stop when you hover.

Example

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 150px;
      height: 150px;
      background: #8ebf42;
      position: relative;
      animation: play 1s infinite;
      }
      div:hover {
      animation-play-state: paused;
      }
      @keyframes play {
      from {left: 0px;}
      to {left: 200px;}
      }
    </style>
  </head>
  <body>
    <p>Hover over the green box to stop the animation.</p>
    <div></div>
  </body>
</html>

Values

Value Description
running It is default value when the animation is running.
paused The animation is paused.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Browser support

43.0+
4.0-42.0 -webkit-
12.0+ 16.0+
5.0-15.0 -moz-
9.0+
5.1-8.0 -webkit-
12.0+
15.0-29.0 -webkit-

Practice Your Knowledge

The followings are values of the animation-play-state property, except



Do you find this helpful?

Related articles