GPU如何加速CSS变换？

Posted 2023-03-06

【中文标题】GPU如何加速CSS变换？

【英文标题】：How to GPU accelerate CSS transform?

【发布时间】：2015-12-13 09:15:28

【问题描述】：

我知道有时浏览器会使用 GPU 加速 CSS 转换。但是什么时候会发生这种情况，有没有办法强制 GPU 加速以获得流畅的动画？

this article

【参考方案1】：

你可以使用css的“will-change”属性：

will-change: transform;

一些 GPU 加速的 css 属性（并非总是如此）：

过滤器 不透明度 变换

【参考方案2】：

大多数现代浏览器都支持 GPU 加速，但它们仅在认为 DOM 元素会从中受益时才使用它。最强烈的迹象是正在应用 3D 变换。所以使用 3D 等效变换。例如，使用 transform: translate3d(50px, 0, 0) 代替 transform: translateX(50px)。请参阅this article 了解更多信息。