Pause e retome animações CSS3 com CSS!

Se você <3 animações CSS3 tanto quanto eu , ficará encantado em saber que existe uma maneira fácil de pausar uma animação: estado de reprodução da animação

Aqui estão os estilos que uso para impedir que todas as animações em uma página sejam reproduzidas até que um usuário clique no botão “reproduzir”, que coloca uma classe de “reproduzir” na tag body.

* {
  animation-play-state: paused;
}

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