CSS hover下元素平移不平滑，transition left top或transform translate如何优化？

本文共计528个文字，预计阅读时间需要3分钟。

使用 `left` 或 `top` 配合 `transition` 做hover平滑移动，易造成卡顿、不平滑，根本原因是它们触发了浏览器的重排和重绘。

优先用 transform: translate()

transform: translate() 只影响合成层（Compositor Layer），不触发布局和重绘，由 GPU 加速，动画天然更流畅。