Pause a CSS animation

There is a CSS property to pause an animation: animation-play-state. It's default value is running.
When it's value is set to paused the animation will freeze at the current state.

Example:

@keyframes rotating {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.my-element {
animation: rotating 10s infinite linear;
animation-play-state: paused;
}

.my-element--rotating {
animation-play-state: running;
}

Live example on CodePen:

Published: January 19th, 2020
Tags: til,CSS