javascript - 如何在 css 元素宽度动画中获得 60 fps？

Question

有什么方法可以在 css 动画中获得平滑的 60fps，尤其是当您为某些元素宽度设置动画时？

我已经尝试了 3 种方法，我只通过 css transform: scale() 获得了 60fps，但这种方法不是很有用，因为所有子元素都在父容器中拉伸(stretch)。我为子元素添加了 scale(0.5) 并且取消了拉伸(stretch)，但是我在使用绝对定位元素时遇到了一些问题。

当我使用简单的宽度动画时，在大型着陆页中我的帧数从每秒 60 帧减少到每秒 17 帧。

改变当前div的flex-graw，fps为3-4。

这是一个低 fps 的简单示例:https://jsfiddle.net/ucgwfetq/14/

在每个 block 中包含大量元素的大型着陆页中，fps 会低得多。

Answer 1

会降低 FPS 的一件事是您使用了多个非常大的图像，然后使用 background-size: cover 将它们缩小。

我不确定您将同时在屏幕上显示多少张 1920x1080 图像，但在动画期间计算它们的大小，这将消耗大量资源。

此外，将 transition: width .3s ease-out; 放在 .block 而不是 .block-large 上将会成功看起来很流畅，无论 FPS 是多少。

https://jsfiddle.net/ucgwfetq/16/