webkit demo

Question

你可以看到这里发生了什么http://goo.gl/bBMx6x（这是一个小提琴，它不允许我发布它而不必c＆amp; 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 = "";
}

这个想法如下：

当您按停止时，获取计算出的样式以了解元素在动画中的位置
由于变换使用起来很复杂，我还设置动画来更改一个更容易的值。在这种情况下，我选择了z-index，但它可以是你想要的任何东西（当然不可见）
使用此值可为您正在设置的新动画设置负延迟。负延迟是使转换从中途开始的方式。

我已经将你的小提琴改编为webkit，但其他浏览器的想法是一样的。

CSS3关键帧 - 改变动画持续时间会导致“跳跃”

1 个答案:

webkit demo