动画持续时间怎么设置css,如何通过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); }

}

这个动画允许我旋转(顺时针)任何具有类“顺时针方向”的标签.

我想做的是用javascript改变动画的执行时间(我称之为速度)

HTML：

sometext

JavaScript的：

var style = document.getElementById("someID").style,speed = 6;

//obvIoUsly the speed is dynamic within my site (through an ``)

//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 =”范围“> slider”更改“速度”时,元素跳转到随机位置(而不是开始和结束)的动画只是一个随机的位置).

注意：暂停和播放功能非常流畅,而不改变动画的“速度”.

我的问题：我可以使用JavaScript来平滑改变动画的“速度”吗？ (没跳)

如果答案是：“在整个动画执行过程中没有办法顺利进行”,那么：

有没有办法在无限动画的下一次迭代中改变它？

如果是这样：

那么我如何告诉它在下一次迭代中开始,以及如何将动画设置为无限(如果动画的动画迭代计数属性总是返回“无限”),那么下一个迭代是什么呢？

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