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 http://html5please.com/ and http://caniuse.com/ don’t mention it yet.

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


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

Demo

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

Leave a Reply