如何使用Javascript平滑地更改无限动画（在CSS3中）的执行时间

我在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:

更新：

而且它有效但是，它在动画中有一个大的随机跳跃，这意味着当我使用“

滑块”更改“速度”时，元素会跳到一个随机位置（不是动画的开始或结束，只是一个随机位置）

注意：暂停和播放效果非常平滑，不会改变动画的“速度”

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

---

就是一个例子。我希望它能帮助你。

也许jQuery

queue

可以帮助你

使用CSS时：

CSS属性转换和动画允许您拾取缓和函数

div {
  transition:         all 600ms cubic-bezier(0.77, 0, 0.175, 1); 
  /* or */
  animation: clockwise 4s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

---

可能发生的情况是，

动画持续时间

“更改”可能会“跳跃”到

动画

中与“更改的”

@关键帧

相对应的点-基于总的“更改的”动画持续时间

如果

动画持续时间
从
开始
（或
0%
）继续
到
（或
100%
），相应的
@关键帧
“位置”也可能会更改

例如，如果原始
动画持续时间
约为
4s
（或
4000ms
）约为
2s
（或
2000ms
），则相应的
关键帧可能约为
50%
，或

从2秒变为4秒动画
50%{-webkit变换：旋转（180度）translateX（150像素）旋转（-180度）；}

当动态更改
动画持续时间
时，相应的
关键帧
可能会“更改”到匹配的
%
点，或者，对于相同的效果，会有更大的持续时间跨度。动画元素可能向前或向后移动，或者由于其自身在相应的
关键帧
和
动画
中重新定位而出现“跳跃”

还有
1s
setTimeout
功能，该功能可能有也可能没有
1s
持续时间

在建议的
转换
效果或
requestAnimationFrame
（）中，可以在较长的
动画持续时间内“平滑”跳转到新的“更改”位置


试试这个：

html

js

使用setTimeout将动画类添加到所需元素中，并将动画类作为回调移除。
也许函数可以满足您的要求：该教程使我能够更多地了解动画，但我尝试通过js更改动画，而不在修改时跳过动画中的点它。我还不想使用任何库，但我会尝试一下。你到底会如何使用队列来帮助解决OP的问题？是的，这将允许我按照我的意愿设置立方贝塞尔函数，但当我动态更改c-bezier函数时，它仍然会跳转。你想实现什么？我不明白，我给你们增加了一个例子，让你们能够想象我试图实现的目标。我还更新了这个问题，如果你还需要什么，请告诉我。你能举个例子说明如何做到这一点吗？
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);

div {
  transition:         all 600ms cubic-bezier(0.77, 0, 0.175, 1); 
  /* or */
  animation: clockwise 4s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

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

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

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

   /* css animation (no change) */
}

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";
    }