应优先使用 transform: translate() 替代 top/left 实现动画，因后者每帧触发重排（layout），而前者仅走 gpu 合成层；需归零 top/left、避免合成层降级，并慎用 will-change。
因为 top/left 每帧都强制重排，而 transform 只走 GPU 合成层——这不是“建议”，是浏览器渲染流水线决定的硬约束。
top/left 为什么每帧都卡
修改 top 或 left 时，浏览器必须重新计算该元素在文档流中的几何位置：父容器是否被撑开、兄弟元素是否要重排、margin/padding/border 是否影响布局边界。哪怕加了 position: absolute，Chrome 和 Safari 在动画密集时仍会执行轻量级 layout（实测 1–3ms/帧），叠加起来直接拖垮帧率。
- DevTools Performance 面板里能看到大量黄色
Layout块 - 同个 3 秒动画，
top方案累计 layout 耗时约 80ms，translate仅约 8ms - 元素带
box-shadow、border-radius等复杂样式时，重绘成本翻倍
transform: translate() 怎么绕过重排
translate() 不改 DOM 几何信息，只告诉合成器：“把这个图层往 X/Y 挪 N 像素”。原始位置、尺寸、父子关系全部不变，浏览器自动为其创建独立合成层（compositing layer），GPU 直接处理位移。
- 动画期间主线程几乎不参与，CPU 时间趋近于 0
- 必须确保没被其他属性打断合成层，比如
filter、opacity和transform同时 transition，旧版 Safari 会退化回 CPU 渲染 - 移动端亚像素抖动常见于
translateX(0.3px)这类小数步进，改用translate3d(0, 0, 0)可绕过
容易踩的坑：初始定位没归零
很多人写 position: absolute; top: 0; left: 0;，然后只把动画部分换成 transform: translateX(100px)——这会导致视觉错位：元素实际坐标是 top: 0 + translateX(100px)，但动画起点却按 top: 0 计算。
- 正确做法：先把
top/left设为0，所有位移由transform表达 - 如果父容器没设
position: relative，absolute子元素会脱离预期上下文，translate也救不回来 - 别滥用
will-change: transform——只在动画开始前 set，结束立即 remove，否则长期占用图层资源
什么场景下其实不用换
静态居中（比如弹窗初始化）不需要改：用 top: 50%; left: 50%; transform: translate(-50%, -50%) 本身不触发重排，性能无差别；真正要换的是滚动时动态调整位置的场景，比如吸顶导航、跟随悬浮按钮——这些才是每帧重排的重灾区。
复杂点在于：不是所有 transform 都能保帧率。一旦和 filter、clip-path 或频繁变更的 z-index 混用，合成层可能被降级，GPU 加速就失效了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
