加快CSS3翻译效果

Question

我有一个div向前和向后无限翻译。所以，我想随机改变div的“速度”。为了增加和减少速度，我试图改变动画持续时间属性，但在此之后：

$("#rectangle").css('-webkit-animation-duration', randomValue + 's');

没有任何反应。 Div必须表现得像它只是增加/减少速度

编辑：那么，如果我的方式不能正常工作，也许任何人都可以提出建议：

Answer 1

我在这个Fiddle中绘制了我想到的一般想法。

我认为你错过了与前缀和浏览器相关的东西......正如你所看到的那样，我写的这个例子正在起作用，也就是那种错误。

正如你所看到的，我所要做的就是调用相同的代码但是使用firefox和webkit的前缀：

$("div").css("-webkit-animation-duration", lastTime + "ms").css("animation-duration", lastTime + "ms");

您必须小心动画持续时间..因为您在动画仍在运行的时间内更改持续时间将根据该时间段内该关键帧的位置重新定位该元素。

示例..如果动画是2秒..并且它已完成90％..将持续时间更改为4秒将使其完成50％（2/4秒）的90％...这就是原因对于你在小提琴中看到的越野车动画。

我希望这有帮助..