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

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

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

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

随着当前分区弹性图的变化，fps为3-4

下面是一个低fps的简单示例

：

---

在每个块中包含大量元素的大型登录页中，fps要低很多。

要降低fps的一点是，您使用了多个非常大的图像，然后使用

背景大小：cover

将它们缩小

我不确定一次屏幕上会有多少1920x1080个图像，但在动画过程中计算它们的大小，这将消耗大量资源

另外，把

过渡：width.3s放出来在
上。block
而不是
。block large
将使它看起来平滑，而不考虑FPS

FPS也取决于硬件，如果不是因为尝试失败而是因为硬件拒绝处理而导致FPS下降，那么您如何测量FPS？@MrLister和Chrome FPS计数器。请尝试使用具有更多控制选项的javascript动画库。我怀疑你在战斗。尝试关闭硬件加速功能。@Vince在firefox第四代corei7中检查了你的小提琴，得到了57.63的平均FPS。什么是
位置：cover
？你的意思是背景尺寸

？