Make a pause during infinite CSS3 animation

Question

I try to make an animation that run every 3 seconds without JavaScript. My animation\'s duration is 1 second.

I\'m only able to wait 3seconds the fi

Answer 1

I am not sure exactly when it was released, and it's not the most cross-browser approach (does not cover older browsers like I.E. 9) but you could use the animationPlayState style prop. Theres some documentation on this found here if you want to check it out.

animationPlayState=false
webkitAnimationPlayState=false

function pause() {
    var animationElement = document.getElementById('animatedItem');
    animationElement.style.animationPlayState='paused';
    animationElement.style.webkitAnimationPlayState='paused';
}

As you can see this put's the items animation into a "paused"state, to put it back where it left the animation off at, you can set it to the "running" state that this prop accepts.

Here is a quick example I found when browsing Google.