jacobfentress
6/6/2014 - 3:48 PM

You can 'pause' and 'play' CSS animation by changing its animation-play-state property. Setting it to 'paused' stops your animation in place

You can 'pause' and 'play' CSS animation by changing its animation-play-state property. Setting it to 'paused' stops your animation in place, until you change animation-play-state to running, for example on hover.

animation.css
content_copyfile_download
.animating_thing {
  animation: spin 10s linear infinite;
  animation-play-state: paused;
}

. animating_thing:hover {
  animation-play-state: running;
}