本文详解如何通过 CSS transition 和 :hover 配合 translate 实现元素位置变化的双向平滑动画，避免直接切换 position 值导致动画失效，并提供可复用、语义清晰的纯 CSS 解决方案。
本文详解如何通过 css `transition` 和 `:hover` 配合 `translate` 实现元素位置变化的双向平滑动画，避免直接切换 `position` 值导致动画失效，并提供可复用、语义清晰的纯 css 解决方案。
在 CSS 中，直接对 position 属性（如 relative ↔ absolute）设置 transition 是无效的——因为 position 是一个离散的枚举值，浏览器无法计算中间状态，因此 hover 进入时看似有动画，退出时却“瞬移”回原位。这是你遇到问题的根本原因。
✅ 正确做法是：保持 position: relative（或 static）不变，仅通过可动画的属性（如 transform: translate()、top + left 配合 will-change）实现视觉位移，从而确保进入和退出均有流畅过渡。
推荐方案：使用 transform: translate()（最佳实践）
.team-member .name-container {
position: relative; /* 始终保持相对定位，不切换 */
top: 90%; /* 初始垂直偏移（可选） */
transition: transform 0.7s ease-in-out, top 0.7s ease-in-out;
}
.team-member:hover .name-container {
transform: translateY(-30%); /* 推荐：高效、硬件加速、不影响文档流 */
/* 或搭配 top 使用：top: 30%; */
}✅ 优势：transform 触发 GPU 加速，性能优异；不改变文档流，避免布局抖动；支持双向平滑过渡。
替代方案：固定 position: relative + top/left 动画
若需兼容极老浏览器（如 IE11），可用 top/left，但需显式声明 will-change: top 提升渲染性能：
立即学习“前端免费学习笔记（深入）”；
.team-member .name-container {
position: relative;
top: 90%;
transition: top 0.7s ease-in-out;
will-change: top; /* 提前告知浏览器该属性将频繁变化 */
}
.team-member:hover .name-container {
top: 30%;
}⚠️ 注意事项：
- ❌ 不要写 transition: position 0.7s —— 它完全无效；
- ❌ 避免在 hover 中动态切换 position 值（如 relative → absolute），这会重置定位上下文，导致动画中断且布局不稳定；
- ✅ 所有动画属性（transform、top、opacity 等）必须在同一选择器层级定义初始态与 hover 态，确保 transition 可被正确继承；
- ✅ 若 .team-member 本身需响应 hover，建议直接使用 :hover 伪类，而非依赖 JS 添加 .hovered 类——更简洁、零 JS、利于 SEO 与可访问性。
完整可运行示例
<!DOCTYPE html>
<html>
<head>
<style>
.team-member {
margin: 2rem;
}
.team-member .name-container {
position: relative;
top: 90%;
padding: 0.5rem 1rem;
background: #f0f8ff;
border-radius: 4px;
transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.team-member:hover .name-container {
transform: translateY(-30%);
}
</style>
</head>
<body>
<div class="team-member">
<div class="name-container">Alex Morgan</div>
</div>
</body>
</html>? 总结：动画的本质是属性值的连续插值，而非 DOM 结构的突变。坚守“不动 position，只动 transform 或 offset”原则，即可轻松实现进退皆柔顺的交互效果。
