CSS3關鍵幀 - 更改動畫持續時間導致「跳躍」

Question

你可以看到這裏發生了什麼http://goo.gl/bBMx6x（這是一個小提琴，它不會讓我發佈它，而不必在開始時，請稍等幾下秒，然後按停止..它跳轉到（我認爲）的位置，如果它從一開始就有較低的持續時間的話。

我試圖做的是有它旋轉，然後停止「完成」自旋，但快一點..

Answer 1

那是不是更多鈔票要做到這一點，你正在嘗試的方式。 （因爲你猜）

你必須在JavaScript中計算第二個動畫的開始方式。

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

的想法是這樣的：

1. 當你按下停止，讓計算樣式知道在哪裏動畫中的元素是
2. 由於變換使用起來很複雜，我還設置了動畫來改變一個更簡單的值。在這種情況下，我選擇了z-index，但它可以是任何你想要的（當然是不可見的）
3. 使用此值可以爲您設置的新動畫設置負延遲。負面延遲是使轉換在中途開始的方式。

我已將您的小提琴僅適用於webkit，但這個想法對於其他瀏覽器是一樣的。