javascript - 连续旋转动画使用css3还是js？

Question

我在动画中有一些对象，它们使用 css3 不断地来回旋转。为此，我创建了一个声明，如下所示:

@-webkit-keyframes wiggle {
0% {-webkit-transform:rotate(12deg);}
50% {-webkit-transform:rotate(-6deg);}
100% {-webkit-transform:rotate(12deg);}
}

我想使用它的每个对象都执行以下操作:

.p4, .p5, .p6 {
-webkit-animation-name: wiggle; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: ease-in-out;
}

因为我想在每个对象之间有一些随机性，所以我有以下改变动画持续时间:

.p4 {
-webkit-animation-duration: 5s; 
}

.p5 {
-webkit-animation-duration: 7s; 
}

.p6 {
-webkit-animation-duration: 8s; 
}

等等……

这工作正常 - (目前仅在 Chrome 中进行测试)。但它似乎不是很理想。

我想知道是否有更快的方法来实现这一点。或者更精简的方式。我相信我可以用 JS 执行此操作，但我不确定最终用户资源上的内容会更轻量级。

有没有更好的方法可以用更少的资源实现这种基本动画 - 如果有，怎么做？

除此之外，如果我使用 jquery 创建相同的动画，我如何实际测试所需的内存使用量？我最近发现了一些东西来测试选项卡的内存使用情况，但结果似乎不一致。即有时 1 个选项卡比另一个使用更多内存，反之亦然，即使代码保持不变。

感谢您的指点。

Answer 1

坚持使用 CSS3 动画，如果它们按预期工作，如果需要，在 JS 中做一些事情作为不支持浏览器的后备。

用 JS 替换 CSS3 并不是真的更精简或资源占用更少，恰恰相反，因为 CSS3 似乎具有更流畅的动画，并且在某些浏览器中将使用硬件加速和 GPU，这是 JS 无法实现的(至少不容易) .

总而言之，您最终会用 JS 编写更多内容，并且可能还会使用库或插件来制作旋转动画。在大多数浏览器中它会不太流畅，并且使用更多资源以及 JS 必须每秒多次设置 css tranform 值以获得稍微流畅的动画。