CSS3 키 프레임 - 애니메이션 기간이 변경되면 "점프"가 발생합니다

Question

http://goo.gl/bBMx6x의 내용은 여기에서 볼 수 있습니다 (이 코드는 피할 수 없으므로 &p 코드없이 게시 할 수 없습니다). 시작을 클릭하고 몇 시간 기다렸다가 초를 누른 다음 중지를 누릅니다. 그것은 처음부터 더 낮은 지속 시간을 가졌을 때의 위치로 점프합니다 (나는 생각합니다). 내가 할 노력하고있어

는 회전하고 정지에 "마무리"스핀하지만이입니다 조금 더 빨리 ..

그것은 당신이하려고하는 방법을 할 가망없는

Answer 1

. (그리고 당신이 추측하는 이유로)

두 번째 애니메이션을 시작하는 방법을 자바 스크립트로 계산해야합니다. 당신이 중지를 누르면 애니메이션의 요소는입니다

1. 이 알 수있는 계산 된 스타일을 얻을 :

   webkit demo

   스크립트는 아이디어는 다음과 같다

   $(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 = ""; 
   } 
   

   입니다

2. 변형은 사용하기가 복잡하기 때문에 더 쉬운 값을 변경하기 위해 애니메이션을 설정합니다. 이 경우 Z- 인덱스를 선택하지만 원하는대로 설정할 수 있습니다. (물론 보이지 않습니다.)
3. 설정중인 새 애니메이션에 음수 지연을 설정하려면이 값을 사용하십시오. 음의 지연은 전환을 중간에 시작하는 방법입니다.

필자는 웹킷에만 귀하의 바이올린을 적용했지만 아이디어는 다른 브라우저에서도 동일합니다.