用top/left会掉帧，因其触发重排；应改用transform（如translate3d）并仅配合opacity做动画，避免混用布局属性和强制will-change，确保全程GPU合成。
为什么用 top/left 会掉帧
top/left 是布局属性，每次修改都会强制浏览器重新计算元素位置和文档流，触发重排（reflow）。移动端 CPU 资源紧张，一帧内反复重排直接拉垮帧率，尤其在 Android 5–7 的 WebView 或低端 iOS 设备上，top: 10px 动画很容易跌破 30fps。
transform 替代的实操写法
把所有位移动画逻辑从 top/left/margin 换成 transform: translateX()、translateY() 或 translate3d()：
-
top: 20px; left: 30px;→ 改为transform: translate(30px, 20px); - 需要强 GPU 加速时，用
transform: translate3d(30px, 20px, 0);（比translateZ(0)更明确） - 动画中避免混用：不要一边写
transform: translateX(100px)，一边又设top: 50px，后者会让浏览器放弃图层优化
transition 和 @keyframes 中的注意事项
过渡或关键帧动画里，只声明 transform 和 opacity 这类合成属性，其他一律剥离：
- 错：
transition: top 0.3s, opacity 0.3s;→top拖垮整条流水线 - 对：
transition: transform 0.3s, opacity 0.3s; - @keyframes 里同理，
from { transform: translateX(-100%); opacity: 0; }是安全组合 - 别在同一个动画里塞
transform+box-shadow+filter—— 后两者可能破坏图层合并，导致频繁重绘
will-change 不是保险丝，要动态控制
will-change: transform 是提示，不是开关。静态写死在 CSS 里等于给每个元素提前建图层，内存吃紧时反而更卡：
立即学习“前端免费学习笔记（深入）”；
- 动画开始前 1–2 帧用 JS 设置：
el.style.willChange = 'transform'; - 监听
animationend或transitionend后立刻清除：el.style.willChange = 'auto'; - iOS Safari 对极短动画（≤16ms）可能不触发
animationend，务必加兜底：setTimeout(() => el.style.willChange = 'auto', duration + 100) - 别对列表项批量加
will-change，比如.list-item { will-change: transform; }—— 安卓低端机容易 OOM
transform 就万事大吉”，却在动画过程中偷偷读取 getBoundingClientRect() 或改了 width，瞬间退回到 CPU 渲染。真正顺滑的前提，是整条渲染路径只走合成阶段。 
