CSS animation-play-state Property

The CSS animation-play-state property controls whether a CSS animation is running or paused. Toggling it is the standard way to start and stop an animation without removing the animation itself.

Pausing does not reset progress: when you resume a paused animation, it continues from exactly where it stopped instead of restarting from the first keyframe. This makes animation-play-state ideal for "play/pause" controls and for stopping motion while the user hovers or interacts with an element.

This page covers the property's syntax, its accepted values, hover-driven and JavaScript-driven examples, and how it behaves when several animations run on the same element.

When to use it

Pause on hover — stop a looping animation (a marquee, a spinner, a carousel) while the pointer is over it, so users can read or interact.
Play/pause buttons — flip the value from JavaScript in response to a click, the way a media player toggles playback.
Defer the start — declare an animation but begin it paused, then set it to running later when a condition is met (an element scrolls into view, data finishes loading, etc.).

The property is one of the CSS3 animation properties and is part of the animation shorthand, alongside animation-name, animation-duration, and animation-iteration-count.

Multiple animations

When you assign several comma-separated animations to one element, each animation-play-state value lines up, in order, with the animation at the same position in animation-name. For example, animation-play-state: paused, running pauses the first animation and runs the second. If you list fewer states than names, the values are repeated to cover the rest.

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;

Examples

The "running" value

running is the default, so this example behaves the same with or without the declaration — the box slides once over 10 seconds:

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

Try it Yourself »

Pause on hover with the "paused" value

Here a looping animation is paused while the pointer is over the box. Because pausing keeps the current progress, the box freezes in place and resumes from the same spot when you move away:

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

Try it Yourself »

Toggling play/pause with JavaScript

You can read or set the value from script through the animationPlayState property of an element's style object. This is how a play/pause button works:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #box {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        position: relative;
        animation: play 1s infinite;
        animation-play-state: paused;
      }
      @keyframes play {
        from { left: 0px; }
        to { left: 200px; }
      }
    </style>
  </head>
  <body>
    <button id="toggle">Play</button>
    <div id="box"></div>
    <script>
      const box = document.getElementById("box");
      const button = document.getElementById("toggle");
      button.addEventListener("click", () => {
        const paused =
          getComputedStyle(box).animationPlayState === "paused";
        box.style.animationPlayState = paused ? "running" : "paused";
        button.textContent = paused ? "Pause" : "Play";
      });
    </script>
  </body>
</html>

The animation starts paused, so nothing moves until the user clicks the button. Each click flips the state and updates the button label.

Values

The property accepts a single keyword (or a comma-separated list, one per animation):

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 (`running`).
inherit	Inherits the property from its parent element.

Browser support

animation-play-state is supported in all modern browsers — Chrome, Edge, Firefox, Safari, and Opera. It is not animatable, so changing it takes effect immediately rather than transitioning between states.

Practice

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

It specifies whether the animation is running or paused.It determines the speed of the animation.It carries over the animation effect to its child elements.It defines the color of the animation.It restarts the animation when set to 'running' from a 'paused' state.