Last Updated: September 27, 2021
· rachelnabors

Pause and resume CSS3 animations w/ CSS!

If you <3 CSS3 animations as much as I do, you'll be delighted to know that there's an easy way to pause an animation: animation-play state

Here are the styles I use to keep all the animations on a page from playing until a user has clicked a "play" button, which puts a class of "playing" on the body tag.

* {
  animation-play-state: paused;

.playing * {
  animation-play-state: running;

4 Responses
Add your response

Thanks for this! I thought animation-play-state is not widely supported, but the support is actually really good.

over 1 year ago ·

@timpietrusky Yeah, it's totally in the "It works on recent versions of all the browsers, so ship it!" zone ;)

over 1 year ago ·

@rachelnabors Good enough to play with it if you ask me :D

over 1 year ago ·

This is awesome, thanks for sharing!

over 1 year ago ·