CSS3属性是否像动画太强大了？

Question

这个重复的动画代码会减慢我的系统吗？：

@-webkit-keyframes animate {-webkit-animation-iteration-count:infinite;...}

所有CSS3属性都是CPU密集型的吗？

感谢。

Answer 1

每个浏览器都有自己的CSS3实现，并且处理和呈现效果的方式也各不相同。一个浏览器会阻塞某些东西，而另一个浏览器可能不会。你最好只是谨慎：不要过度使用CSS3效果，一切都会好的。如果您真的关心性能，可以尝试使用旧笔记本电脑或其他东西来测试网站。如果它窒息 - 你可能夸大了渐变或其他东西。

正如我的一位程序员所说（关于C ++应用程序，但它在这里完全适用）：在你真正注意到它们之前不要担心性能问题：）。

Answer 2

避免使用box-shadow＆amp;文字阴影。不要尝试为整个页面或body元素设置动画，并使用translate3d，scale3d，rotate3d，因为它们在计算机和移动设备上是硬件加速的。如上所述，避免动画属性的过度。然而，我怀疑一个甚至四个无限动画元素会减慢你的页面速度。

Improving the Performance of your HTML5 App

<强>更新

小心！浏览器现在正在降低转换3D属性的硬件加速。您现在和将来都必须使用其他方法来优化您的应用。

Answer 3

我有一个大约有15个元素的网页似乎像地震一样震动。动画以10％为增量，持续1秒。它在无限循环中重复。我注意到处理器使用量猛增。所以我会说是的，但这取决于动画，

Answer 4

我会在查看动画时检查浏览器的CPU使用情况。某些功能可能不会减慢系统速度，但其他功能可能会这样做。

确实有些浏览器在某些事情上可能会有不同的行为。但是，我使用旋转动画测试，它在我的3.5ghz机器上使用了大约30-50％的CPU使用率，使用多个浏览器进行测试。无论是否设置为无限迭代，都没关系。

截至目前，某些功能可能会降低机器速度并且不便于用户使用。您可能希望在使用它们之前等待这些功能进行优化。我觉得他们的设计效率低下，因为即使我的iPod touch动画看起来也很流畅。

另请注意，我的浏览器当时没有运行GPU加速，这可能是一个因素。

Answer 5

如果您在CSS3动画中仅使用3D变换，例如：

@keyframes animation { 
    0% { transform: translate3d(288px,123px,0px) rotate(10deg) scale(1,1) }
    50% { transform: translate3d(388px,123px,0px) rotate(20deg) scale(2,2) }
    100% { transform: translate3d(488px,123px,0px) rotate(30deg) scale(3,3) }
}

指示浏览器播放动画后，CPU使用率将保持不变。这是因为3D变换总是通过浏览器的GPU加速来渲染。 （注意：如上所述设置一个3D变换足以启动GPU加速）。

运行Chrome CPU Profiler时会拍摄以下快照：

正如您所看到的，在使用一些javascript代码指示CSS3动画之后CPU活动是平坦的（在这种情况下，动画是2秒长）。