加速CSS3翻译效果

Question

我有一个向前和向后无限转换的div。所以，我想随机改变div的“速度”。为了提高和降低速度，我尝试更改动画持续时间属性，但在此之后：

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

什么都没发生。Div必须运行，就像它只是在增加/减少速度

编辑:所以，如果我的方法不能正常工作，也许任何人都可以给出一个建议，它是如何制作的？

Answer 1

我在这篇Fiddle中画出了我所想的大意..

我想你遗漏了一些与前缀和浏览器相关的东西..正如你所看到的，我写的例子正在工作，也有一些buggy。

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

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

示例..如果动画是2秒..它已经完成了90%。这就是你在小提琴中看到的buggy动画的原因。

我希望这会有帮助..。