像 animate 这样的 CSS3 属性是否过于占用 CPU 资源？

Question

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

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

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

谢谢。

Answer 1

避免使用 box-shadow 和 box-shadow文本阴影。不要尝试对整个页面或主体元素进行动画处理，并使用translate3d、scale3d、rotate3d，因为它们是在计算机和移动设备上进行硬件加速的。如上所述，避免过度使用动画属性。然而，我怀疑一个甚至四个无限动画元素是否会减慢您的页面速度。

提高 HTML5 应用程序的性能

更新

注意！浏览器现在正在放弃 3D 变换属性的硬件加速。现在和将来，您将不得不使用其他方法来优化您的应用程序。

Answer 2

每个浏览器都有自己的 CSS3 实现，并且处理和渲染效果的方式也各不相同。一种浏览器会因某些内容而阻塞，而另一种浏览器则可能不会。你最好保持谨慎：不要过度使用 CSS3 效果，一切都会好起来的。如果您确实关心性能，您可以随时尝试使用旧笔记本电脑或其他设备来测试该站点。如果它令人窒息——你可能夸大了渐变之类的东西。

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

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 分析器时拍摄的：

如您所见，CPU 活动持平在使用一些 JavaScript 代码指示 CSS3 动画之后（在本例中，动画长度为 2 秒）。