javascript - CSS3 关键帧 - 更改动画持续时间会导致 "jumps"

Question

你可以在这里看到发生了什么http://goo.gl/bBMx6x (这是一个 fiddle ，它不允许我在没有 c&p 代码的情况下发布它)点击开始，等待几秒钟，然后按停止..它跳到(我认为)它本来应该在的位置从一开始就有更短的持续时间。

我想做的是让它旋转，然后停止“完成”旋转，但速度要快一点..

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. 使用此值为您正在设置的新动画设置负延迟。负延迟是使过渡从中途开始的方法。

我已经将你的 fiddle 改编成只适用于 webkit，但这个想法对于其他浏览器也是一样的。