为什么这种转换没有利用gpu（或者它）？

Question

我正在研究Will Boyd和他在css conf上的丝滑动画谈话。

现在尝试复制它而没有任何成功（或至少我认为）。 当使用transform它假设利用gpu所以在devtools中它在使用“渲染/绘制闪烁”选项时不应该显示为渲染，但确实如此。有什么想法吗？

比较威尔的例子 bad fish
good fish

我的例子 css差异是这个，full code and demo on codepen

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

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

Answer 1

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