用 transform 而不是 top/left 是因为前者由 GPU 加速、不触发重排，性能更好；需配合 transition 声明，写在常态规则中，并确保父容器有 position: relative 以限定定位上下文。
为什么用 transform 而不是直接改 top/left
因为 position: absolute 下直接修改 top 或 left 会触发 Layout（重排），动画卡顿明显；而 transform: translate() 只影响合成层，由 GPU 加速，性能好得多。浏览器对 transform 和 opacity 的动画优化最成熟，其余属性（如 width、height、background-color）尽量避免用于关键帧动画。
基础悬浮动画写法：hover + transform
必须确保元素已设 position: absolute（或 fixed、relative），否则 transform 仍生效，但定位基准可能不符合预期。动画需配合 transition 声明哪些属性要过渡、持续时间与缓动函数。
.box {
position: absolute;
top: 100px;
left: 100px;
width: 200px;
height: 100px;
background: #4a90e2;
transition: transform 0.3s ease-out;
}
.box:hover {
transform: translateY(-10px) scale(1.05);
}
-
transition必须写在常态（非 hover）规则里，否则首次 hover 无过渡效果 - 多个
transform函数（如translateY和scale）可合并写在一个transform声明中，顺序影响结果（先缩放再位移，和先位移再缩放不同） - 若需更精细控制，可用
@keyframes配合animation，但 hover 触发场景下transition更轻量
常见翻车点：父容器没设 position: relative
当子元素用 position: absolute 定位时，它的偏移参考的是「最近的已定位祖先」。如果父容器没设 position: relative（或 absolute/fixed），它就会往上一直找，最终相对 body 定位——导致 hover 动画看起来“飞出去”或位置错乱。
- 检查父容器是否漏了
position: relative - 若父容器本身是 flex/grid 布局，且你只想让子元素在局部区域内浮动，仍需显式加
position: relative给该父容器 - 调试技巧：临时给父容器加
outline: 1px solid red，确认定位上下文范围
进阶：hover 动画 + 保持悬停状态（比如菜单展开）
纯 :hover 在鼠标移出即还原，无法“停留”。若需鼠标离开后动画继续执行完再还原（比如淡出），得用 JavaScript 监听 mouseenter/mouseleave 并切换 class，配合 transitionend 事件控制状态。
立即学习“前端免费学习笔记（深入）”；
.menu-item {
position: absolute;
transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu-item.is-hovered {
transform: translateX(8px);
}
- 不要依赖
:hover实现“悬停后保持位移”，它本质是伪类，不具备状态记忆 - 用 JS 控制 class 切换比内联 style 更利于维护和复用动画逻辑
- 注意：
transform不影响文档流，所以即使元素位移了，它原本占位空间还在——这点和top/left不同，但有时正是你需要的
transition 还是 animation，最后才调贝塞尔曲线。 
