我在 stackoverflow 中搜索了很多与我的问题相关的问题，但我还没有找到一个可以用纯 JavaScript(不使用任何类型的库)回答我的问题的问题。

我的问题是我有一个 CSS3 的无限动画，即:

.clockwiseAnimation {
    top: 270px;
    left: 200px;
    position: absolute;

    -webkit-animation: clockwise 4s linear infinite; /* Chrome, Safari 5 */
    -moz-animation: clockwise 4s linear infinite; /* Firefox 5-15 */
    -o-animation: clockwise 4s linear infinite; /* Opera 12+ */
    animation: clockwise 4s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}
@-webkit-keyframes clockwise {
    from { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to { -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
@-moz-keyframes clockwise {
    from { -moz-transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to { -moz-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
@-o-keyframes clockwise {
    from { -o-transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to { -o-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
@keyframes clockwise {
    from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}

此动画允许我旋转(顺时针)任何具有“clockwiseAnimation”类的标签。

我想做的是使用 javascript 更改动画的执行时间(我称之为速度)，例如:

HTML:

<span id="someID" class="clockwiseAnimation">sometext</span>

JavaScript:

var style = document.getElementById("someID").style,
speed = 6; 
//obviously the speed is dynamic within my site (through an `<input type="range">`)
//for the purposes of this example I set the speed to a different value(6seconds) than the original value(4seconds).
style.webkitAnimationDuration = style.mozAnimationDuration = style.oAnimationDuration = style.animationDuration = speed + "s";

当我暂停然后播放(播放我的意思是取消暂停而不是重新启动)动画时，它会起作用，即:

var style = document.getElementById("someID").style;
some = 6; //it is dynamic (as I pointed out before)

//pause
style.webkitAnimationPlayState = style.mozAnimationPlayState = style.oAnimationPlayState = style.animationPlayState = "paused";

//change speed
style.webkitAnimationDuration = style.mozAnimationDuration = style.oAnimationDuration = style.animationDuration = speed + "s";  

//play (== UNPAUSE) //UPDATE: Added the timeout because I can't get it to work any other way.
setTimeout(function(){
            style.webkitAnimationPlayState = style.mozAnimationPlayState = style.oAnimationPlayState = style.animationPlayState = "running";
        },1);

更新:

而且有效! 但是，它在动画中有一个很大的随机跳跃，这意味着当我用“<input type="range"> slider ”改变“速度”时，元素跳到一个随机位置(不是开始也不是结束动画只是一个随机位置)。

注意:暂停和播放在不改变动画“速度”的情况下非常流畅。

我的问题:我可以使用 JavaScript 平滑地改变动画的“速度”吗？ (没有跳跃) 如果答案是:“没有办法在整个动画执行过程中顺利完成”，那么: 有没有办法在 infinite 动画的下一次迭代中更改它？ 如果是这样: 那么如果我将动画设置为无限(执行动画的元素的动画迭代计数属性始终返回“无限”)，我如何告诉它在下一次迭代中开始以及如何知道下一次迭代是哪一次。

Here是一个例子。希望对您有所帮助。

最佳答案

可能发生的是 animation-duration“变化”可能会“跳”到 animation 中与“变化的” 相对应的点@keyframes - 基于总的“改变的”动画持续时间..

如果 animation-duration 从开始(或0%)继续到到(或100%)，相应的@keyframes“位置”也可以改变。

例如，如果原始 animation-duration 为 4s(或 4000ms)，大约为 2s(或者，2000ms)，相应的关键帧可能大约为50%，或者

在 2 秒变成 4 秒动画 50% { -webkit-transform: rotate(180deg) translateX(150px) rotate(-180deg); }

当 animation-duration 动态改变时，相应的 keyframes 可能会“改变”到匹配的 % 点，或者，一个相同效果的持续时间跨度更大。动画元素可能看起来前进或后退，或者由于它在“已更改”的相应关键帧和动画中重新定位自身而“跳跃” 。

还有 1s setTimeout 函数，它实际上可能有也可能没有 1s 持续时间。

在更长的 animation-duration 建议的 transition 效果或 requestAnimationFrame 内，“平滑地”“跳转”到新“改变的”位置是可能的(http://www.w3.org/TR/animation-timing/)。

..

试试这个:

html

<input type="range" id="speedSlider" min="2000" max="6000" value="4000">

CSS

    input {
    -webkit-transform: rotate(180deg);  
    top : 50px;
    position : absolute;
}

.clockwiseAnimation {
 /* top: 270px;
    left: 200px; */
    left : 50%;
    top : 50%;
    position:absolute;

   /* css animation (no change) */
}

js

var speedSlider = document.getElementById("speedSlider");
    speedSlider.addEventListener("change", changeSpeed, false);
    function changeSpeed(e){
        var speed = Math.floor(speedSlider.value);
        var element = document.getElementById("span");
        var style = element.style;
        style.webkitAnimationPlayState = style.mozAnimationPlayState = style.oAnimationPlayState = style.animationPlayState = "paused";
        style.webkitAnimationDuration = style.mozAnimationDuration = style.oAnimationDuration = style.animationDuration = String(speed) + "ms";
            style.webkitAnimationPlayState = style.mozAnimationPlayState = style.oAnimationPlayState = style.animationPlayState = "running";
    }

关于javascript - 如何使用 Javascript 平滑地更改无限动画(在 CSS3 中)的执行时间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21297775/