如何GPU加速CSS变换？
How to GPU accelerate CSS transform?
我知道有时浏览器会 GPU 加速 CSS 转换。但是什么时候会发生这种情况，有没有办法强制 GPU 加速以获得流畅的动画？
大多数现代浏览器都支持 GPU 加速，但它们仅在认为 DOM 元素会从中受益时才使用它。最强烈的迹象是正在应用 3D 转换。所以使用 3D 等效变换。例如，使用 transform: translate3d(50px, 0, 0) 而不是 transform: translateX(50px)。有关详细信息，请参阅 this article。
您可以使用 css "will-change" 属性:
will-change: transform;
一些 css GPU 加速的属性（不总是）：
- 过滤器
- 不透明度
- 变换
我知道有时浏览器会 GPU 加速 CSS 转换。但是什么时候会发生这种情况，有没有办法强制 GPU 加速以获得流畅的动画？
大多数现代浏览器都支持 GPU 加速，但它们仅在认为 DOM 元素会从中受益时才使用它。最强烈的迹象是正在应用 3D 转换。所以使用 3D 等效变换。例如，使用 transform: translate3d(50px, 0, 0) 而不是 transform: translateX(50px)。有关详细信息，请参阅 this article。
您可以使用 css "will-change" 属性:
will-change: transform;
一些 css GPU 加速的属性（不总是）：
- 过滤器
- 不透明度
- 变换