CSS动画卡顿？这几个优化技巧让你页面丝滑如德芙

你有没有遇到过这种情况：辛辛苦苦写了个漂亮的加载动画，结果在低配手机上一跑，画面一顿一顿的，像老式投影仪放电影？其实问题很可能出在CSS动画的写法上。别急着换JS动画库，先看看是不是这些性能坑你踩了。

为什么你的动画会卡

CSS动画虽然简单好用，但不是所有属性都适合做动画。比如你给width、height或者margin加过渡，浏览器每次都要重新计算布局（reflow），再重绘（repaint），一来二去，帧率就掉了。

举个例子，你想让一个盒子从左往右滑动，写了这么一段：

.box {
  margin-left: 100px;
  transition: margin-left 0.3s ease;
}

.box:hover {
  margin-left: 200px;
}

看起来没问题，但每次变化都会触发整个文档的布局重算，代价太高。

用 transform 才是正道

想让动画流畅，关键是要让浏览器尽量只做合成（composite）操作，而不是重排重绘。这时候就得靠transform出场了。

把上面的例子改成这样：

.box {
  transform: translateX(100px);
  transition: transform 0.3s ease;
}

.box:hover {
  transform: translateX(200px);
}

transform和opacity是少数能被GPU加速的属性，浏览器会把它提升到独立图层，动画时几乎不占用主线程，自然就流畅了。

别忘了 will-change

如果你有个元素即将开始动画，可以提前告诉浏览器：“我要变啦，准备好资源”。这就是will-change的作用。

.box {
  will-change: transform;
}

注意别滥用，只在动画前动态加上这个属性，结束后移除，否则会消耗更多内存。

减少动画复杂度

有时候你加了个阴影动画，结果整个页面都卡了。因为box-shadow这种属性涉及绘制，频繁变化会拖慢渲染。如果非要用，可以尝试用transform模拟位移效果，避开直接修改阴影值。

还有就是别一口气给几十个元素同时做复杂动画，尤其是轮播图、列表入场这种场景。可以加点延迟，错开执行时间，减轻瞬时压力。

用 Chrome DevTools 检测

打开开发者工具，切到“Performance”面板，录一段操作，就能看到每一帧的耗时。重点关注是否出现红色的“Layout”或“Paint”高峰。如果有，说明你在动画中触碰了高成本属性。

另外，在“Rendering”面板里开启“Paint flashing”，页面重绘区域会实时高亮显示。理想的动画过程应该是只有动画元素在闪，其他地方纹丝不动。

优化动画不是炫技，而是让用户感觉不到动画的存在——因为它太顺了。下次写CSS动画前，先问自己一句：我改的这个属性，真的能让页面跑得动吗？