animation-play-state

Defines whether an animation is running or paused.

Syntax

animation-play-state: <value>;

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;
}
}

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;
}
}
// Target div
const box = document.querySelector('div');
// Pause transition on click
box.addEventListener('click', () => {
box.style.animationPlayState = 'paused';
});
Edit this page on GitHub

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your feedback.

Learn CSS on Codecademy

Edit this page on GitHub

Contributors