应优先使用 transform: translate() 替代 left/top 实现 hover 平移，因其仅触发合成层更新、由 GPU 加速；需在默认状态设 transition: transform，hover 中仅修改 transform 值，并注意 display 类型与多 transform 合并写法。
用 left 或 top 配合 transition 做 hover 平移，容易卡顿、不平滑，根本原因是它们触发了浏览器的**布局（Layout）和绘制（Paint）**，性能开销大。
优先用 transform: translate()
transform: translate() 只影响合成层（Compositor Layer），不触发布局和重绘，由 GPU 加速，动画天然更流畅。
- 把原本写
left: 10px;的地方，改成transform: translateX(10px); - 横向+纵向平移直接写
transform: translate(10px, 5px); - 务必给元素加
transition: transform 0.3s ease;（不要写all） - 如果元素本身有其他 transform（比如 rotate、scale），用空格合并：
transform: rotate(5deg) translateX(20px);
确保 transition 生效的关键细节
光写 transition 不够，还要注意这些：
- transition 必须写在**默认状态（非 hover）**上，hover 里只改 transform 值
- 避免同时设置
left/top和transform，会相互覆盖或导致意外行为 - 对 inline 元素（如 span、a），先加
display: inline-block;或block，否则 transform 可能不生效 - 若平移后出现模糊，可加
will-change: transform;（慎用，仅对频繁动画的元素）
兼容老写法？别硬改 left/top
如果项目中已有大量 left/top 动画，且无法整体替换，可以临时优化：
立即学习“前端免费学习笔记（深入）”；
- 给该元素加
transform: translateZ(0);或will-change: left;，强制开启硬件加速（效果有限，不如直接换 translate） - 缩短 transition 时间（如
0.2s），减少卡顿感知 - 用
ease-out替代ease，让进入更干脆，观感更顺
一个干净示例
p {transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
p:hover {
transform: translateX(8px) translateY(-2px);
}
