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