How to pause css animation and then continue to work from the pause point?

Question

I play CSS animations with endless iterations until I dwell on it using a java script (using the technique here ).

Subsequently, I resume the animation. The problem is that the animation restarts from the start point, and not from the last point to pause.

Is there a way to continue the animation from the pause point without going to the beginning?

Edit: between pause and resume, I also change animation duration , see demo. You should see some "jumps." This strange behavior needs to be explained.

Answer 1

I just started digging into JS myself, so there are, of course, better ways to do this, but what about this one - Demo (Unprefixed version).

CSS

 #box { position: relative; top: 20px; left: 20px; width: 100px; height: 100px; background: #393939; animation: move 2s linear infinite; animation-play-state: running; } @keyframes move { 100% { transform: rotate(360deg); } } 

JS:

 (function () { var box = document.getElementById('box'); box.onclick = function () { if (box.style.animationPlayState === "paused") { box.style.animationPlayState = "running"; } else { box.style.animationPlayState = "paused"; } }; })(); 

Based on the fact that the animation is started or paused, I change the animation-play-state onclick.

EDIT: added css code.

Answer 2

http://jsfiddle.net/zhang6464/MSqMQ/

Just switch the animation-play-state css paused to paused , as described in the article ( http://css-tricks.com/restart-css-animation/