javascript - CSS3 キーフレーム - アニメーションの長さを変更すると「ジャンプ」が発生する

Question

ここで何が起こっているかを確認できますhttp://goo.gl/bBMx6x (これはフィドルです。コードを c&p せずに投稿することはできません) 開始をクリックし、数秒待ってから停止を押します..最初から持続時間が短かった場合の位置にジャンプします。

私がやろうとしているのは、それを回転させてから、回転を「終了」して停止することですが、少し速くなります..

Answer 1

あなたが試みている方法でそれを行うことは不可能です。（そして、あなたが推測する理由のために）

2 番目のアニメーションを開始する方法を 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. 停止を押すと、計算されたスタイルを取得して、要素がアニメーションのどこにあるかを認識します
2. 変形は使い方が複雑なので、アニメーションの値も変更しやすいように設定しています。この場合、z-index を選択しましたが、好きなように設定できます (もちろん、それは表示されません)。
3. この値を使用して、設定中の新しいアニメーションに負の遅延を設定します。負の遅延は、移行を途中で開始する方法です。

私はあなたのフィドルを webkit にのみ適応させましたが、考え方は他のブラウザーでも同じです。