Pausing CSS3 Animations

Did you know you can pause CSS3 animations?

It’s a simple style property but it could potentially be very useful as removing an animation and then adding it again currently restarts it. So, for example, you could animate a logo inside a button that pauses when you hover over it.
It’s only supported by Chrome, Firefox and Opera so you would still require the correct prefix. Interestingly both and don’t mention it yet.

button:hover .icon{
-webkit-animation-play-state:paused; /* Webkit Browsers */
-moz-animation-play-state:paused; /* Firefox*/

/*JavaScript to toggle the Animation Play State*/
if ( === "paused") { = "running";
} else { = "paused";


Here’s a quick demo which shows how to toggle to property with JavaScript: