How to pause and resume CSS3 animation using JavaScript?

I find it easier to do it with a css class. With it, you can use prefixes for every browser.

.paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

Then you only have to add or remove this class to your animated element yo pause / resume the animation.