1

我在动画中有一些对象，它们使用 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 创建相同的动画，我该如何实际测试所需的内存使用情况？我最近发现了一些东西来测试标签的内存使用情况，但结果似乎不一致。即有时一个选项卡比另一个使用更多的内存，反之亦然，即使代码保持不变。

感谢您的任何指示。

4

1 回答 1

1

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

用 JS 替换 CSS3 并不是真正的精简或更少的资源密集型，恰恰相反，因为 CSS3 似乎有更流畅的动画，并且在某些浏览器中将使用硬件加速和 GPU，这在 JS 中是不可能的（至少不容易）。

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

于 2012-05-15T23:22:46.170 回答