tht85a
Last Updated: February 25, 2016
·
2.389K
· rachelnabors
150 twitter

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;
}
Say Thanks
Respond

4 Responses
Add your response

1714
13a9550a854af911366d9f5deb785cd6

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

over 1 year ago ·
1719
150 twitter

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

over 1 year ago ·
1722
13a9550a854af911366d9f5deb785cd6

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

over 1 year ago ·
2887
Mike headshot

This is awesome, thanks for sharing!

over 1 year ago ·