left/top 动画卡顿因触发重排重绘，而 transform: translate() 仅合成且 GPU 加速；应预先声明 transition、用 will-change 或 translateZ(0) 提升图层，并避免动态添加 transition。
用 left、top 做位移过渡，通常不如 transform: translate() 平滑，根本原因是浏览器渲染机制不同：修改 left/top 会触发重排（reflow）+ 重绘（repaint），而 transform 只触发合成（compositor-only），能走 GPU 加速。
为什么 left/top 过渡卡顿
当元素使用 position: relative/absolute 并设置 left 或 top 动画时：
- 每次动画帧都要重新计算布局（重排），尤其在父容器有复杂样式或兄弟元素多时更明显
- 浏览器无法将其提升为独立图层，常导致掉帧（如从 60fps 掉到 30fps 或更低）
- 在低性能设备或 chrome 某些版本中，还可能出现“抖动”或“跳变”现象
改用 transform: translate() 更可靠
transform 属于 css 合成属性，不改变文档流，也不影响布局，浏览器会优先将其交由合成线程处理：
- 写法示例：
transform: translateX(100px);或transform: translate(20px, -15px); - 配合 transition 使用：
transition: transform 0.3s ease; - 若需同时支持缩放/旋转等，
translate也能自然融入（比如transform: translate(10px, 5px) scale(1.1);）
确保硬件加速真正生效
仅写 transform 不一定自动开启 GPU 加速，可加小技巧强制提升图层：
立即学习“前端免费学习笔记（深入）”；
- 添加
will-change: transform;（仅在需要动画的元素上，避免滥用） - 或用
transform: translateZ(0);/transform: translate3d(0, 0, 0);触发 3D 上下文（兼容性更好，但现代项目推荐will-change） - 注意：不要给大量元素加
will-change，否则可能增加内存开销和初始化延迟
transition 要写在“稳定”的地方
避免在 hover 或 js 切换 class 时才动态加 transition 属性（易造成首帧延迟）：
- 把
transition: transform 0.3s ease;写在默认状态里（非 hover 下） - 只在 hover/class 切换时改
transform值，这样浏览器能提前准备动画管线 - 错误示范：
.box:hover { transition: transform 0.3s; transform: translateX(50px); }→ 首次 hover 会有延迟 - 正确写法：
.box { transition: transform 0.3s ease; } .box.active { transform: translateX(50px); }