animation-play-state

Definition

The animation-play-state property in CSS is used to specify whether an animation is running or paused.

The possible values for this property are:

• running: This is the default value. The animation will play as normal.
• paused: This will pause the animation. It can be resumed with running.

Here’s a simple example:

div {
  animation-name: example;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

@keyframes example {
  from {
    background-color: red;
  }

  to {
    background-color: yellow;
  }
}

In this example, the animation is initially paused. The background color of the div is set to animate from red to yellow, but because the animation-play-state is set to paused, the animation will not run until the animation-play-state is changed to running.

This property is particularly useful when you want to create pause/play controls for your animations.