如何在 CSS 元素宽度动画中获得 60 fps？答案

【问题标题】：How to get 60 fps in css element width animation?如何在 CSS 元素宽度动画中获得 60 fps？
【发布时间】：2016-01-01 11:22:57
【问题描述】：

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

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

当我使用简单的宽度动画时，在大着陆页中，我得到了每秒 60 到 17 帧的回撤。

随着当前 div 的 flex-graw 变化，fps 为 3-4。

Here is a simple example with low fps:https://jsfiddle.net/ucgwfetq/14/

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

【问题讨论】：

【解决方案1】：

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

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

此外，将transition: width .3s ease-out; 放在.block 上而不是.block-large 将使它看起来很流畅，无论FPS如何。

【讨论】：