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

How to get 60 fps in css element width animation?

本文关键字：fps 动画 css 元素      更新时间：2023-09-26

有没有办法在css动画中获得平滑的60fps，特别是当你动画一些元素的宽度时?

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

当我使用简单的宽度动画时，在大的登陆页面中，我得到了每秒60帧到17帧的收缩。

改变当前div的伸缩图，fps为3-4。

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

在每个块中都有大量元素的大型登陆页面中，fps必须更低。

有一件事会降低你的FPS，那就是你正在使用多个非常大的图像，然后用background-size: cover缩小它们。

我不确定你一次会在屏幕上有多少张1920x1080的图像，但由于它们都在动画期间计算大小，这将消耗大量资源。

另外，将transition: width .3s ease-out;放在.block而不是.block-large上将使其看起来平滑，无论FPS如何。

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

相关文章：