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.


@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:

This article has been published on on my blog. Here's a list of all articles if you're interested in this kind of stuff.

Tags: til,CSS