left 触发重排导致掉帧，transform 通过 GPU 合成避免主线程阻塞；混用非合成属性或未归零初始定位会使动画降级，必须全量替换并规范写法。
left 触发重排，每帧都让主线程满载
浏览器渲染流水线中，left 属于布局（layout）属性，每次动画帧更新时，它都会强制触发重排：浏览器得重新计算该元素的几何位置、父容器是否被撑开、兄弟元素是否换行……这个过程全在主线程跑，CPU 负载陡增。实测低端安卓机上单次重排耗时 3–8ms，而 60fps 要求每帧 ≤16.67ms，连续几帧重排就直接掉帧。
transform 只走合成层，GPU 独立处理位移
transform: translate() 不改布局信息，只告诉合成器“把这个图层往 X 方向挪 N 像素”。浏览器会自动为其创建独立合成层（compositing layer），后续动画全程由 GPU 合成线程完成，主线程几乎不参与。同个 3 秒平移动画，left 方案累计 layout 耗时约 80ms，translate() 仅约 8ms。
@keyframes 里混用非合成属性，整段动画立刻降级
浏览器不会报错，但只要关键帧中出现一个非合成属性（比如 left、top、width、background-color），整条动画就默默退回 CPU 渲染——哪怕其他属性全是 transform 和 opacity。
- 错：
@keyframes slide { to { left: 200px; transform: rotate(10deg); } }→ 全部降级 - 对：
@keyframes slide { to { transform: translateX(200px) rotate(10deg); } }→ 真正走合成管线 - 注意：
transform内多个函数要写在同一声明里，别拆成多条transform规则，否则后写的会覆盖前写的
初始定位没归零，视觉错位+性能白费
很多人保留 top: 20px; left: 30px;，只把动画部分换成 transform: translateX(100px)，结果是两个偏移叠加，起点漂移，且浏览器无法将该元素稳定提升为合成层。
- 必须先归零：
top: 0; left: 0; - 再用
transform: translate(30px, 20px)表达全部初始位移 - 若父容器没设
position: relative，absolute子元素的translate也找不到参照系，动画会乱飞
will-change 滥用、父容器 overflow: hidden 导致 Safari 降级……这些都不是孤立问题，而是和 left 是否被彻底剔除强相关。只要关键帧里还留着一个 left，前面所有优化都可能失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
