为什么我的 CSS 动画会消耗这么多资源？

如何解决为什么我的 CSS 动画会消耗这么多资源？

我意识到带关键帧的 CSS 动画真的很需要资源。

我已经消除了阴影，就我而言，这将性能提高了近 50%。我还听说我应该包含一个 rotateZ(360deg) 来诱使浏览器使用 GPU 加速。但即使应用了这些“技巧”，我的明星背景也非常资源匮乏。您一打开我的网站，cpu 和 GPU 的使用率就会急剧上升，并保持在相当高的水平。

我想知道是否有更好的方法来执行我想要的动画而不浪费如此多的 cpu 或 GPU 能力。

我想要在我的网站上添加移动星星的背景。我的解决方案是为每个星星创建一个 div，给它一个大小、背景颜色和带有关键帧的 CSS 动画。不透明度、x 和 y 位置以及动画速度是随机的。

关键帧如下：

@keyframes linear-translate {
  0% {
    left: -10%;
    transform: rotateZ(360deg); /* rotateZ tricks the browser to use GPU acceleration for better performance  */
  }
  100% {
    left: 110%;
  }
}

@keyframes linear-translate-initial {
  0% {
    transform: translateX(0) rotateZ(360deg);
  }
  100% {
    left: 110%;
  }
}

以下是其中一个 div 元素的示例（使用顺风 CSS 类）：

<div class="absolute block bg-gray-200 rounded-full" 
     style="left: 1%; top: 8%; width: 3px; height: 3px; opacity: 0.381289; 
     animation: 90.0069s linear 0s 1 normal none running linear-translate-initial,110.007s linear 90.0069s infinite normal none running linear-translate;"></div>

链接到带有工作示例的代码和框： https://codesandbox.io/s/starbackgroundreacttailwindcss-wzers?file=/src/Starfield.tsx

关于为什么这些动画消耗如此多的能量以及如何使它们更有效率的任何想法？毕竟只是横向翻译...

更新：

我尝试按照 marco 的建议在不同速度的 div 元素中对星星进行分层。 我的结果可以在这里找到：

https://codesandbox.io/s/layeredstarbackgroundreacttailwindcss-wj71q?file=/src/App.tsx:392-445

不幸的是，“改进”并没有那么大。 cpu 使用率略有下降，但 GPU 使用率急剧上升。

解决方法

我在你的沙箱上玩了一会儿，是的，解决方案就是这么简单 - 只有许多/不同的动画/项目要为 CPU 处理，你可以在打开任务管理器并检查 CPU 时轻松看到当沙箱与您的页面闲置时使用。在我的“小型”机器上，Firefox 使用高达 53% 的 CPU。当我减少脚本中的星星数量（减少到 10 个）时，它会减少到 18% 左右。

我在“移动 div”背景下遇到了类似的问题，从左到右移动时带有阴影/渐变颜色和旋转...

到目前为止有趣的项目。 一个想法可能是将多个星星固定在有限数量的图层上，然后移动整个图层（即使您有 10 个图层，也只有 10 个对象在移动）...

是的，你不会像自己计算/移动每颗星星那样强烈的效果，但有 10 层作为背景（我认为它是背景吗？）它不应该对观众产生任何显着差异......