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，但对于其他浏览器来说，想法是相同的。