CSS 动画性能优化：为什么你的动画会卡

动画掉帧的本质：浏览器每帧都在重新计算布局或绘制。

只动 transform 和 opacity

这两个属性由合成器（GPU）处理，不触发布局与绘制：

1
2
3
4
5

/* 慢：每帧触发布局 */
.box { transition: width 0.3s; }

/* 快：仅合成 */
.box:hover { transform: translateX(10px) scale(1.05); }

will-change 要省着用

提前告知浏览器"我要动了"，滥用会吃显存：

1

.card:hover { will-change: transform; }

用 DevTools 验证

打开 Performance 面板录制一段动画，Frames 轨道保持 60fps 才算合格。掉帧的那一帧点开看，通常是 Forced Reflow——多半是"边读布局边写样式"导致的。

一句话总结：动画优先用 transform / opacity，别碰 top / left / width / margin。