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转换值以获得稍微平滑的动画。