transform比left/top更顺滑，因其仅触发Composite（合成）且由GPU处理，避免主线程的Layout和Paint阻塞；正确写法为transition: transform 0.3s，配合translate3d(0,0,0)按需启用硬件加速。
为什么 transform 比 left/top 更顺滑
直接修改 left、top、width 等属性会触发浏览器的 Layout（布局）和 Paint（绘制），这两步都在主线程执行，容易被 js 或其他样式计算阻塞，造成卡顿。transform 和 opacity 是仅触发 Composite（合成）的属性，浏览器可将其交由 GPU 单独处理，跳过昂贵的重排重绘。
- 只对
transform和opacity做过渡，能稳定进入硬件加速通道 - 用
translateX(10px)替代left: 10px，效果一致但性能差异显著 - 避免在 transition 中混用
transform和left，否则整个过渡可能退回到软件渲染
如何强制启用 GPU 加速但不引发闪烁或错位
加 will-change: transform 或 transform: translateZ(0) 确实能提前提示浏览器启用 GPU 层，但滥用会导致内存占用升高、纹理过多，甚至在 safari 上引发文字模糊或元素错位。
- 仅在需要过渡的元素上按需设置：
will-change: transform，且最好在过渡开始前通过 JS 添加，结束后移除 - 更稳妥的做法是用
transform: translate3d(0, 0, 0)—— 它比translateZ(0)兼容性更好，且明确启用 3D 上下文 - 慎用
will-change: opacity：部分旧版 chrome 在 opacity 过渡中开启 will-change 反而更卡
transition 的写法影响是否走硬件加速
过渡是否真正由 GPU 承担，不仅取决于属性，还和 transition 的声明方式强相关。错误的写法会让浏览器放弃优化。
- 写成
transition: transform 0.3s ease✅ —— 明确指定单一可加速属性 - 避免
transition: all 0.3s ease❌ —— 一旦后续改了color或background，整个过渡降级为软件渲染 - 不要用简写覆盖：比如先设
transition: transform 0.3s，又在媒体查询里写transition: background-color 0.2s，后者会完全替换前者，丢失 transform 过渡 - 动画开始前确保元素已“就位”：比如用
getComputedStyle(el).transform触发一次读取，可避免 layout thrashing 导致首帧延迟
移动端 Safari 的特殊坑：transform 过渡突然掉帧
ios Safari 对 transform 的复合层管理较激进，尤其在页面滚动中启动过渡时，容易因图层合并失败导致掉帧或闪屏。
立即学习“前端免费学习笔记（深入）”；
- 给过渡容器加
backface-visibility: hidden，可减少图层合并判断失误 - 避免在
position: fixed元素内部做高频transform过渡，iOS 下易触发渲染管线阻塞 - 测试时打开 Safari 开发者工具 → “Timelines” 面板，看每一帧是否稳定在 16ms 内；若 Composite 时间飙升，大概率是图层未正确分离
硬件加速不是开关一开就万事大吉，关键在让浏览器「无歧义地理解你要动什么、怎么动」——属性选对、写法干净、时机可控，比堆 translateZ(0) 有用得多。