animation-play-state

Anonymous contributor's avatar
Anonymous contributor
Anonymous contributor's avatar
Anonymous contributor
Published Jul 8, 2021Updated Sep 3, 2021
Contribute to Docs

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

All contributors

Looking to contribute?

Learn CSS on Codecademy