鼠标移出带hover动画的div时如何实现平滑过渡效果？

问题出在你混淆了CSS transition 和 @keyframes 动画的机制：如果用的是帧动画，transition 无法控制它的结束复位过程，因为两者的工作逻辑完全不同。下面给你两种可行的解决方案：

方案一：用transition实现（推荐） #

直接通过transform属性的变化结合transition，这是实现平滑移入移出过渡最简单高效的方式，不需要写帧动画：

/* 给文本元素设置初始状态和过渡规则 */
.text-content {
  transform: translateX(0);
  transition: transform 0.3s ease; /* 0.3s是过渡时长，可自行调整 */
}

/* hover时改变位移值 */
.your-div:hover .text-content {
  transform: translateX(100px);
}

这样鼠标移入时文本会平滑移到100px位置，移出时也会平滑回到初始位置，完全符合你的需求。

方案二：保留@keyframes动画的处理方式 #

如果一定要用帧动画，需要给元素设置正向和反向两个动画，并通过animation-fill-mode: forwards保持动画结束后的状态：

.text-content {
  /* 默认状态播放反向复位动画 */
  animation: slide-back 0.3s ease forwards;
}

.your-div:hover .text-content {
  /* hover时播放正向移动动画 */
  animation: slide-forward 0.3s ease forwards;
}

/* 正向移动动画 */
@keyframes slide-forward {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

/* 反向复位动画 */
@keyframes slide-back {
  from { transform: translateX(100px); }
  to { transform: translateX(0); }
}

注意要保证两个动画的时长一致，否则过渡会不协调。

内容的提问来源于stack exchange，提问作者Silambarasu