通过 CSS transition 属性而非重复使用 animation，可实现元素悬停时正向移动、移出时反向缓动的自然过渡效果；关键在于将变换属性（如 transform）与 transition 统一声明在常态样式中，避免依赖多套 keyframes。
通过 css `transition` 属性而非重复使用 `animation`，可实现元素悬停时正向移动、移出时反向缓动的自然过渡效果；关键在于将变换属性（如 `transform`）与 `transition` 统一声明在常态样式中，避免依赖多套 keyframes。
在 CSS 动画实践中，一个常见误区是：为悬停（:hover）状态单独定义 @keyframes 动画，并试图用另一套动画处理“退出”过程——这不仅逻辑冗余，还极易导致退出时突兀跳变（即所谓“snaps back”）。真正简洁、高效且符合性能最佳实践的方案，是仅用 transform + transition。
以下是推荐写法（以文本沿 X 轴从 0 → 100px 平移为例）：
.text-element {
/* 初始位置：X = 0 */
transform: translateX(0);
/* 关键：统一声明 transition，作用于所有支持的变换属性 */
transition: transform 0.3s ease-out;
}
.text-element:hover {
/* 悬停时平移至 X = 100px */
transform: translateX(100px);
}
<div class="text-element">Hover me!</div>
✅ 为什么这样更优？
- transition 自动捕获属性变化的起始值与目标值，并在进入/离开 :hover 时双向插值，无需手动定义两套动画；
- transform 硬件加速，性能远优于 width、left 等触发布局重排（reflow）的属性；
- 支持贝塞尔缓动函数（如 ease-in-out、cubic-bezier(.25,.46,.45,.94)），精细控制运动节奏。
⚠️ 注意事项：
- 避免在 :hover 中同时设置 transition（如 transition: all 0.3s），会导致过渡行为不可预测；应始终只在常态规则中声明 transition；
- 若需兼容旧浏览器，可补充 -webkit-transform 和 -webkit-transition；
- 不要对 display、height（未设初始值时）等非连续属性使用 transition，它们不支持渐变。
总结：用 transform 实现位移 + 在常态下声明 transition，是最轻量、最可靠、最符合现代 CSS 规范的悬停进出过渡方案。
