Stopping a CSS animation but letting its current iteration finish

Question

I have the following HTML:

<div class="rotate"></div>​ 

And the following CSS:

@-webkit-keyframes rotate {   to {      -webkit-transform: rotate(360deg);   } } .rotate {     width: 100px;     height: 100px;     background: red;     -webkit-animation-name:             rotate;     -webkit-animation-duration:         5s;     -webkit-animation-iteration-count:  infinite;     -webkit-animation-timing-function:  linear; }​ 

I want to know if there is a way (using JavaScript) to stop the animation but let it finish its current iteration (preferably by changing one or a few CSS properties). I have tried setting -webkit-animation-name to have a blank value but that causes the element to jump back to its original position in a jarring fashion. I have also tried setting -webkit-animation-iteration-count to 1 but that does the same thing.

Answer 1

Stop the animation upon receiving an animationiteration event. Something like this (using jQuery):

CSS

@-webkit-keyframes rotate {   to {     -webkit-transform: rotate(360deg);   } } .rotate {     width: 100px;     height: 100px;     background: red; } .rotate.anim {     -webkit-animation-name:             rotate;     -webkit-animation-duration:         5s;     -webkit-animation-iteration-count:  infinite;     -webkit-animation-timing-function:  linear; } 

HTML

<div class="rotate anim">TEST</div> <input id="stop" type="submit" value="stop it" /> 

JS (JQuery)

$("#stop").click(function() {     $(".rotate").one('animationiteration webkitAnimationIteration', function() {         $(this).removeClass("anim");     }); }); 

Fiddle: http://jsfiddle.net/sSYYE/1/

Note that I'm using .one here (not .on) so that the handler only runs once. That way, the animation can later be restarted.