GPU如何加速CSS变换？

【问题标题】：How to GPU accelerate CSS transform?GPU如何加速CSS变换？
【发布时间】：2015-12-13 09:15:28
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

will-change: transform;

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

过滤器
不透明度
变换

【讨论】：

【解决方案2】：

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

【讨论】：