CSS3關鍵幀-更改動畫持續時間會導致“跳躍”

Question

您可以在此處查看正在發生的情況http://goo.gl/bBMx6x （這是個小提琴，不允許我在不進行c＆p代碼的情況下發布它），單擊開始，等待幾秒鍾，然后按停止。它會跳到（我認為）從一開始就持續時間較短的位置。

我想做的是讓它旋轉，然后停止“完成”旋轉，但速度要快一點。

Answer 1

按照您嘗試的方式做到這一點是不可能的。 （出於您猜測的原因）

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

Webkit演示

該腳本是

$(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. 當您按Stop時，獲取計算出的樣式以了解元素在動畫中的位置
2. 由於使用變換非常復雜，因此我還設置了動畫以更改更簡單的值。 在這種情況下，我選擇了z-index，但是它可以是任何您想要的（當然不可見）
3. 使用此值可以在要設置的新動畫上設置負延遲。 負延遲是使過渡開始的方式。

我僅將小提琴調整為適用於webkit，但對於其他瀏覽器來說，想法是相同的。