CSS动画这事儿，我一开始也以为挺简单的。加个transition就完事儿了嘛。结果第一次实战就被打脸——给电商首页做轮播图，手机端直接卡成PPT。画面一帧一帧地蹦，老板站在背后盯了一会儿，扔了句：“这动画是给蜗牛看的？”
我当时那个尴尬啊，恨不得钻桌子底下。后来才明白，这玩意儿学问大着呢。
开篇图：一张对比图，左边是卡顿的动画帧率（8fps），右边是优化后的（60fps），配文：“从蜗牛到猎豹，只差三步。”
先来看第一个坑：用top/left做位移，这简直是性能杀手。我写轮播图时，觉得最直观的就是用left：
“css`
.slider-item {
transition: left 0.3s ease;
}
结果在低端安卓机上，动画掉帧掉到怀疑人生。一开始我还以为是手机问题，后来发现left会触发重排，浏览器得重新算布局位置，每一步跑完整流程，能不卡吗？换成transform: translateX()后，性能直接起飞——加载从3秒多降到1秒以内，具体数值没精确测，但肉眼可见地流畅了，同事都问我是怎么弄的。这玩意儿真是坑死我了，早该换的。
正确写法：
`css`
.slider-item {
transition: transform 0.3s ease;
will-change: transform;
}
transform只触发合成，不触动重排和重绘。will-change就是给浏览器打预防针：“哥们儿，这个元素要动，先准备好图层。”但别滥用，我有个项目加了五六个will-change，结果浏览器内存吃满，反而更卡，真是搬起石头砸自己的脚。
顺手说另一个踩坑的事：动画太多，GPU扛不住。那次我挺崩溃的。
有个项目我做了一堆粒子特效，用@keyframes让50个div同时旋转缩放。结果笔记本风扇直接起飞，CPU占用率飙到90%。我查了半天才发现，每个动画默认走CPU，根本没利用GPU硬件加速。一开始还以为是代码写错了，浪费时间。
解决方案是强制GPU加速：
`css`
.particle {
transform: translateZ(0);
backface-visibility: hidden;
}
但这里有个陷阱：不是所有属性都能加速。opacity和transform能走GPU，但height、width、color这些只能走CPU。所以你要缩放元素，用scale()而不是直接改width，别问我怎么知道的，踩过的坑可多了——第一次用transform时，忘了加will-change，结果动画还是卡，后来才发现是图层没准备好。
对了，还有个技巧：动画属性别超过三个。这个是我自己试出来的。
核心图：一个流程图，展示“重排 -> 重绘 -> 合成”的层级，标注transform和opacity只到合成层，其他属性要经过全部。
我给出方案：
`css`
.item {
opacity: 0;
animation: fadeIn 0.5s ease forwards;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.item:nth-child(2) { animation-delay: 0.1s; }
.item:nth-child(3) { animation-delay: 0.2s; }
这个设计一开始我也觉得反人类，但用animation-delay控制顺序，比JS循环省资源，而且不用考虑垃圾回收，浏览器自己搞定。后来我就习惯了，甚至推荐给团队。
还有个工具你必须要知道：Chrome DevTools的Performance面板。我一般先录一段动画，看关键指标：
- FPS：低于30说明卡顿，赶紧调
- GPU占用：如果高但FPS低，说明硬件加速没用对
- 布局和绘制时间：超过10ms就要优化，不然体验差
有一次我录完发现“Layout”花了200ms，原因是动画元素加了box-shadow，每次移动都触发重绘。我改成filter: drop-shadow()，效果类似，但性能好得多。或者直接用伪元素模拟阴影，完全不触发重绘。踩过的坑，真是血泪教训。
总结前图：一个手机截图，显示Chrome DevTools的Performance记录，标注“Layout 200ms”、“FPS 15”，配文：“这就是卡顿的罪魁祸首。”
经过这些教训，我总结出几个关键点：
对了，移动端别忘了优化。在低端机上，减少动画元素数量，比如从50个降到20个。用media queries对性能差的设备降级：
`css“
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01s !important;
transition-duration: 0.01s !important;
}
}
这个尊重用户设置，也避免卡顿投诉，我们团队用了之后用户反馈好很多。
这样优化后，我那个轮播图从卡成PPT变成帧率稳定60。老板没说话，但数据摆在那——用户停留时间涨了30%。你也试试，踩过的坑我帮你填平了，别走弯路。
本文仅供参考，不构成医疗建议。