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;
}