animation-play-state
Toggle animations between running and paused with animation-play-state. Change it via JavaScript or :hover for interactive control.
CSS
Intermediate
3 min read
animation-play-state Property
Example
.spinner {
animation: spin 1s linear infinite;
}
/* Pause on hover */
.spinner:hover {
animation-play-state: paused;
}
/* Control via JavaScript */
const el = document.querySelector(".spinner");
el.style.animationPlayState = "paused";
el.style.animationPlayState = "running"; Pro Tip
Pausing is better than removing the animation class — the element keeps its animated position when you resume.