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

CSS3 keyframes - changing animation duration causes "jumps"

本文关键字：跳跃 持续时间 关键帧 改变 动画 CSS3      更新时间：2023-09-26

您可以在这里看到发生了什么http://goo.gl/bBMx6x（这是一把小提琴，它不允许我在没有c&p代码的情况下发布它）点击开始，等待几秒钟，然后按停止。。它会跳到（我认为）位置，如果它从一开始就有较低的持续时间。

我想做的是让它旋转，然后在停止时"完成"旋转，但速度要快一点。。

这是不可能按照您尝试的方式进行的。（出于你猜测的原因）

您必须用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索引，但它可以是你想要的任何索引（当然，这是不可见的）
  3. 使用该值可以在正在设置的新动画上设置负延迟。负延迟是使过渡在中途开始的方式

我只将你的fiddle应用于webkit，但其他浏览器的想法也是一样的。

相关文章：