CSS animation-play-state

Defines whether an animation is running or paused.

Syntax

animation-play-state: <value>;

Copy to clipboard
Copy to clipboard

where <value> can be one of the following:

• paused: the animation is paused.
• running: the animation is running.

Example 1

Set animation state to running:

div {
  height: 200px;
  width: 200px;
  background-color: blue;
  animation-name: disappear;
  animation-duration: 2s;
  animation-play-state: running;
}

@keyframes disappear {
  from {
    background-color: blue;
  }
  to {
    background-color: white;
  }
}

Copy to clipboard
Copy to clipboard

The output will look like this:

Example 2

Pause the animation on div click:

div {
  height: 200px;
  width: 200px;
  background-color: blue;
  animation-name: disappear;
  animation-duration: 4s;
  animation-play-state: running;
}

@keyframes disappear {
  from {
    background-color: blue;
  }
  to {
    background-color: white;
  }
}

Copy to clipboard
Copy to clipboard

// Target div
const box = document.querySelector('div');
// Pause transition on click
box.addEventListener('click', () => {
  box.style.animationPlayState = 'paused';
});

Copy to clipboard
Copy to clipboard

The output will look like this: