Html 为什么这个转换不利用gpu（或者它真的利用gpu）？

我在看威尔·博伊德和他在css conf上流畅的动画演讲

现在，我想，试图复制这一点却没有任何成功或至少没有成功。 使用transform时，假定它利用了gpu，因此在devtools中，当使用“渲染/绘制闪烁”选项时，它不应显示为渲染，但它确实显示了。有什么想法吗

比较威尔的例子

我的例子 css的区别是

---

CSS动画不会自动被GPU加速。它们由浏览器的渲染引擎执行。但是，如果我们使用transform或translate3d指定动画，那么浏览器将使用GPU渲染图形，这将更有效。

您的浏览器是否能够使用GPU进行硬件加速？是的，MacBook pro late 13使用Chrome，其示例也可以正常工作，不显示油漆闪烁。转到chrome://gpu 并检查硬件acceleration@Oriol除了光栅化软件外，所有选项都可用，但我听说这是Chromium/android专用的？正如我之前提到的，Will的例子很好用。你读了问题还是检查了例子？我清楚地陈述了一个有转换和没有转换的例子，那就是GPU。

@keyframes bad-gpu {
    0%, 100% { left: 0px; }
    50% { left: 400px; }
}

@keyframes good-gpu {
    0%, 100% { transform: translateX(0px); }
    50% { transform: translateX(400px); }
}