卡顿主因是top/left等属性触发重排，必须改用transform/opacity；will-change仅对二者有效，且须动态设置、动画后立即清除。
卡顿不是动画写得不够炫，而是浏览器被逼着反复重排重绘——top、left、width、height这些属性一动，主线程就卡死；真正能稳住 60fps 的，只有 transform 和 opacity。
为什么用 top/left 动画必卡
每次改 top 或 left，浏览器必须重新计算整个文档流的位置、尺寸、换行、文本布局……这个过程叫重排（reflow），全靠 CPU 干活。低端安卓机（尤其 Android 5–7 WebView）调度弱，一帧内反复重排，主线程瞬间堵死，手指滑动都“粘滞”。
-
transform: translateX(100px)只挪图层，GPU 合成线程直接处理，不碰布局也不重绘 - 哪怕
@keyframes里只混进一个margin或background-color，整段动画就默默退回到 CPU 渲染 - 错误写法：
@keyframes move { from { left: 0; } to { left: 100px; } } - 正确写法：
@keyframes move { from { transform: translateX(0); } to { transform: translateX(100px); } }
will-change 是提示，不是开关
will-change: transform 是提示，不是指令；浏览器是否真建层、何时回收，由实现决定，不可控。静态写 .item { will-change: transform; } 等于给一屏 20 个列表项各占一块 GPU 内存，低端安卓机极易 OOM 卡死。
- 只对「即将开始动画」的单个元素，在用户真实交互瞬间动态设置，动画一结束立刻清除
- 推荐用 class 控制：
.card.is-animating { will-change: transform; } - JS 添加时机：
element.addEventListener('touchstart', () => element.classList.add('is-animating')) - 移除必须监听
animationend（不是transitionend），并同步清空：element.addEventListener('animationend', () => element.classList.remove('is-animating'))
哪些属性能用，哪些绝对不能碰
浏览器渲染流水线中，不同 CSS 属性触发的阶段完全不同：
- 只触发合成（安全）：
transform、opacity—— GPU 处理，无重排无重绘 - 触发重绘（谨慎）：
color、background-color、box-shadow—— 不影响布局，但像素级重绘压力大 - 触发重排（禁用）：
top、left、width、height、margin、padding、display—— 每次修改都强制重算整个渲染树 - 文字颜色渐变别用
color动画，改用两层文字叠在一起，靠opacity切换显隐
最常被忽略的一点：动画卡顿往往不是因为没开 GPU 加速，而是你根本没意识到自己正用 left 把浏览器拖进重排泥潭；transform 和 opacity 不是“可选项”，是唯一能守住 60fps 的底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
