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:

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