用transform位移能避免布局抖动，因其不触发重排，仅走合成层；而left/top等会强制重排，影响文档流。应显式写transition: transform 0.3s ease，避免all或漏写timing-function。
为什么用 transform 位移能避免布局抖动
因为 transform 不触发重排（reflow），只走合成层（compositor），浏览器直接复用原有布局结果，仅更新图层位置。而 left、top、margin 等属性修改会强制重新计算元素几何位置和文档流，一动就可能牵连父容器高度、兄弟元素位置，尤其在 flex/grid 容器里更明显。
常见错误现象：transition: left 0.3s 动画中，页面其他区域轻微“跳动”或文字模糊；滚动时动画卡顿；iOS Safari 上偶现白屏闪烁。
- 只要位移，优先写
transform: translateX(10px)，别碰left - 不要混用：比如同时设
left: 20px和transform: translateX(10px)，后者会叠加但前者仍参与布局计算 - 初始状态也得用
transform，别靠left: 0+transform: translateX(0)混搭起步
transition 写在哪？必须加 transform 才生效
很多人写 transition: all 0.3s，以为万能，结果 transform 动画还是卡——因为没明确告诉浏览器要过渡哪个属性。浏览器对 all 的处理很保守，尤其旧版 Chrome 会降级到主渲染线程。
- 务必显式写
transition: transform 0.3s ease，不带all - 如果还涉及透明度变化，写成
transition: transform 0.3s ease, opacity 0.3s ease，别偷懒 - 避免写
transition: transform 0.3s而漏掉 timing-function，部分浏览器（如 Safari）默认用ease，但行为不一致，建议补全
硬件加速不是开个 will-change 就完事
will-change: transform 确实能提前创建合成层，但滥用反而增加内存开销、拖慢首帧、甚至引发 iOS 上的输入框失焦问题。
立即学习“前端免费学习笔记（深入）”；
- 只在真正需要高性能动画的元素上加，比如轮播图项、抽屉菜单、高频 hover 动效
- 动画结束立即清除：
element.style.willChange = 'auto'，或用 class 切换控制 - 现代浏览器（Chrome 90+、Firefox 80+）对
transform+opacity自动启用合成优化，will-change已非必需 - 别写
will-change: left——它不会触发硬件加速，纯属无效
移动端 scroll 触发的位移动画容易掉帧
在 iOS Safari 或 Android WebView 中，用 scroll 事件监听 + transform 更新位置，极易因 JS 执行阻塞合成线程而卡顿。哪怕只改一个 translateY，也可能掉到 30fps 以下。
- 改用
IntersectionObserver替代scroll监听做视差/入场动画 - 必须响应 scroll 时，用
requestAnimationFrame节流，并确保只读取scrollTop，不触发 layout（比如别调offsetHeight） - 动画元素加上
contain: paint，限制浏览器重绘范围，减少合成压力 - 慎用
transform: scale()配合 scroll——缩放会触发纹理重采样，在低端机上比位移更耗资源
最常被忽略的一点：动画元素如果有 box-shadow 或 border-radius，即使用了 transform，仍可能触发每帧 rasterize，导致掉帧。真要兼顾效果和性能，阴影得用伪元素 + transform 分离绘制层。
