javascript - CSS3 keyframes - changing animation duration causes "jumps" -

you can see what's happening here http://goo.gl/bbmx6x (it's fiddle, wouldn't allow me post without having c&p code) click on start, wait couple of seconds , press stop.. jumps to(i think) position have been if had lower duration beginning.

what i'm trying have spinning , on stop "finish" spin little faster..

that not posible way trying. (and reason guess)

you have calculate in javascript way second animation has begin.

webkit demo

the script is

$(document).ready(function() {     $(".start").click(function(e) {         e.preventdefault();         var elem = document.getelementbyid('idtest');         elem.style["-webkit-animation"] = "";         elem.style["-webkit-animation-delay"] = "";          $("#idtest").removeclass("spin2").addclass("spin");     });      $(".stop").click(function(e) {         e.preventdefault();          stopping ();     });      $(".test").on("animationend",         function() {             $(this).removeclass("finishspin");         }     ); });   function stopping () {     var elem = document.getelementbyid('idtest');     var style = window.getcomputedstyle (elem, null);     var frame = style.getpropertyvalue("z-index");     var delay = - frame / 36;     elem.style["-webkit-animation"] = "spin2 10s 1 linear";     elem.style["-webkit-animation-delay"] = delay + "s";     elem.classname = ""; } 

the idea following:

1. when press stop, computed style know in animation element is
2. since transforms complicated use, set animation change easier value. in case, have choose z-index, can whatever want (that not visible, of course)
3. use value set negative delay on new animation setting. negative delay way make transition begin mid-way.

i have adapted fiddle webkit, idea same other browsers.