CSS动画卡成PPT？你可能忘了跟GPU说一声

GPU加速：让动画从机械舞变成丝滑

兄弟，如果你写了一段 @keyframes，兴高采烈地刷新浏览器，然后发现那个小方块不是丝滑移动，而是一顿一顿地像在跳机械舞——恭喜你，你踩了 GPU 加速的坑。

这事儿怎么说的？想象一下：你家电脑的浏览器渲染页面，就像一个大厨做菜。CPU 负责切菜配菜（计算布局、样式），GPU 负责颠勺炒菜（像素填充、合成）。通常你写 animation: move 1s 的时候，浏览器默认让 CPU 吠哼吠哼地一帧一帧算，CPU 心想：“我一个逻辑运算的王者，你让我干像素级的粗活？”

解决方案？告诉浏览器“这活儿让 GPU 干”。只有 transform 和 opacity 这两个属性，浏览器会乖乖交给 GPU 处理。你改 width、left、margin？那 CPU 又要重新算布局，帧率直接腰斩。

还有一个骚操作叫 will-change，相当于你提前跟浏览器说：“哥们，这个元素等会儿要变身，你先给它开个专场。” 但别滥用——你给页面上 200 个 div 都加上 will-change: transform，浏览器内存直接爆炸。

下次写动画，记住口诀：变位移、变透明，GPU 帮你飞；改宽高、改位置，CPU 累成狗。另外，如果你发现 Mac 上的 Safari 动画不如 Chrome 流畅——正常，Safari 的 GPU 合成策略一直是个谜。