CSS动画性能优化：让网页动得更流畅

你有没有遇到过这种情况？在手机上滑动某个页面，里面的动画卡得像老式投影仪。明明设计挺好看，一动起来就让人想关掉。其实很多时候，问题出在CSS动画写法上。

别让重排毁了动画体验

每次修改元素的宽度、高度、边距这些属性，浏览器都得重新计算布局，这个过程叫“重排”。如果动画里频繁触发重排，页面自然就卡了。比如下面这种写法：

<style>
.move-box {
  width: 100px;
  transition: width 0.3s ease;
}
.move-box:hover {
  width: 200px;
}
</style>

<div class="move-box"></div>

看着没啥问题，但每次hover都会引发重排。换成 transform 就聪明多了，因为它走的是合成层，不牵扯布局重算。

用 transform 和 opacity 做动画最省劲

这两个属性是浏览器重点优化对象。尤其是 transform，位移、缩放、旋转都能用它搞定，而且大概率由GPU加速。比如让一个盒子平滑移动：

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

这一改动，动画丝滑度立马不一样。特别是列表滚动、卡片悬停这类高频交互，效果立竿见影。

防抖不如分层，复杂动画拆开看

有时候要做多个属性同时动，比如一边移动一边变透明。这时候别急着全塞进一个transition。可以考虑把元素分层，每个图层只负责一项动画。

.container {
  position: relative;
}
.mover {
  transform: translateX(50px);
  transition: transform 0.4s;
}
.fader {
  opacity: 0.6;
  transition: opacity 0.4s;
}

视觉上是一个整体，但浏览器能分别处理位移和透明度，减少合成压力。

慎用 animation-fill-mode，别给浏览器添负担

很多人喜欢用 animation-fill-mode: both 让动画状态保持住，但这样会让浏览器一直挂着动画上下文。如果页面里一堆这种元素，内存占用悄悄就上去了。该复原就复原，别让动画“赖着不走”。

真机测试比啥都靠谱

代码写得再漂亮，也得看实际表现。尤其是一些中低端安卓机，对 filter 动画特别敏感。像 blur() 这种，动一下可能就掉帧。上线前拿几台老设备跑一圈，比在MacBook上调试十遍都有用。

动画不是炫技工具，而是为了让操作反馈更自然。写法简单一点，浏览器轻松一点，用户才不会觉得“这网页怎么总卡住”。