CSS animation-play-state Property

CSS animation-play-state

The animation-play-state property in CSS specifies whether an animation is running or paused. It allows you to control the playback state of an animation, giving flexibility to start, pause, or resume animations dynamically.

Syntax of animation-play-state

</>

Copy

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

Values

Value	Description
`paused`	The animation is paused at the current frame.
`running`	The animation is currently playing. This is the default value.
`initial`	Sets the property to its default value (`running`).
`inherit`	Inherits the value from the parent element.

Default Value

running

Examples for animation-play-state

Using the CSS animation-play-state Property

The following examples demonstrate how the animation-play-state property can be used to control the playback of animations.

</>

Copy

/* Pause the animation */
.element {
  animation-play-state: paused;
}

/* Resume or start the animation */
.element {
  animation-play-state: running;
}

/* Inherit the value from the parent element */
.element {
  animation-play-state: inherit;
}

Example for Applying animation-play-state

The following example demonstrates how to pause and resume an animation using the animation-play-state property.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  @keyframes move {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(200px);
      background-color: black;
    }
  }

  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: move 3s infinite;
    animation-play-state: running;
    margin: 10px;
    text-align: center;
    line-height: 100px;
    color: white;
  }

  .paused {
    animation-play-state: paused;
  }
</style>
</head>
<body>

<h1>CSS animation-play-state Example</h1>

<div class="box">Running</div>
<div class="box paused">Paused</div>

</body>
</html>

Running Box (`.box`)

The animation-play-state property is set to running, which is the default value.
The animation defined by the @keyframes move runs continuously in an infinite loop.
The animation moves the box horizontally from translateX(0) to translateX(200px) while changing its background color to black at the end of each cycle.
The result is a red box that moves back and forth smoothly with an infinite animation loop.

Paused Box (`.box.paused`)

The animation-play-state property is set to paused.
The animation is paused at its current state, meaning the box remains frozen wherever it was when the animation was paused.
The @keyframes animation does not progress while in the paused state, but the animation can be resumed by changing the animation-play-state back to running.
The result is a red box that remains static, showing its paused position in the animation timeline.

Browser Support

The animation-play-state property is supported in most modern browsers. Below is a compatibility table:

Browser	Version
Chrome	43
Edge	10
Firefox	16
Safari	9
Opera	30

TutorialKart

CSS animation-play-state Property