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.

When multiple comma-separated values are specified for any animation property, they will be attached to the animations that are defined in animation-name differently.

The animation-play-state property is one of the CSS3 properties.

In JavaScript, this property can be used for pausing the animation in the middle of a cycle.

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 of the animation-play-state property with the "running" value:

<!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>

In the following example, the animation will stop when you hover.

Example of the animation-play-state property with the "paused" value:

<!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 Play it
running It is default value when the animation is running. Play it »
paused The animation is paused. Play it »
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Browser support

chrome firefox safari opera
43.0+
4.0-42.0 -webkit-
16.0+
5.0-15.0 -moz-
9.0+
5.1-8.0 -webkit-
12.0+
15.0-29.0 -webkit-

Practice Your Knowledge

What does the CSS property 'animation-play-state' do?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?