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 的声明方式强相关。错误的写法会让浏览器放弃优化。
