Question

我已经在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); }
}

这个动画允许我旋转（顺时针）任何具有“顺时针旋转”类的标签。

我想做的是用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";

当我暂停然后播放（通过播放我的意思是UNPAUSE而不是重启）动画时它起作用，即：

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);

更新：

它有效！但是，它在动画中有一个很大的RANDOM跳跃，这意味着当我用“<input type="range">滑块”改变“速度”时，元素跳转到一个随机位置（不是开头也不是动画的结尾只是一个随机的位置。）

注意：暂停和播放非常流畅，不会改变动画的“速度”。

我的问题：我能否顺利地改变动画的“速度”使用JavaScript ？（没有跳跃）如果答案是：“在整个动画执行过程中没有办法顺利完成”，那么：有没有办法在无限动画的下一次迭代中更改它？如果是这样：然后我怎么能告诉它在下一次迭代中开始，以及如果我将动画设置为无限，如何知道哪个是下一次迭代（动画的迭代计数属性，动画总是返回“无限”）。

Here就是一个例子。我希望它有所帮助。

Answer 1

可能发生的是animation-duration＆＃34;更改＆＃34;可能是＆＃34;跳跃＆＃34;在animation对应于＆＃34;更改＆＃34; @keyframes - 基于总数＆＃34;已更改＆＃34;动画持续时间..

如果animation-duration开始from（或0%）继续to（或100%），则相应的@keyframes＆＃34 ;位置＆＃34;也可以改变。

例如，如果原始animation-duration位于4s（或4000ms）大约2s（或2000ms），则相应{{1}可能在大约keyframes或

2秒进4秒动画 50%

动态更改50% { -webkit-transform: rotate(180deg) translateX(150px) rotate(-180deg); }时，相应的animation-duration可能会被更改＆＃34;到匹配的keyframes点，或者相同效果的持续时间跨度更大。动画元素可以出现前进或后退，或者跳跃＆＃34;跳跃＆＃34;由于它重新定位在＆＃34;变更＆＃34;相应的%和keyframes。

还有animations 1s个功能，可能会或可能不会有setTimeout个持续时间。

有可能顺利地＆＃34; ＆＃34;跳＆＃34;新的＆＃34;改变＆＃34;在建议的1s效果或animation-duration（http://www.w3.org/TR/animation-timing/）的transition更长的位置内。

...

试试这个：

HTML

requestAnimationFrame

CSS

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

JS

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

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

   /* css animation (no change) */
}

Answer 2

使用CSS：http://jsbin.com/UsunIMa/1/

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

Answer 3

使用setTimeout将动画类添加到所需元素，并将动画类删除为回调。

Answer 4

也许jQuery queue可以帮到你。

Here it is

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

4 个答案: