如何实现CSS渐变背景动画在鼠标移出时从当前位置反向播放

你的核心问题在于使用了两个独立的CSS动画，鼠标移出时触发的out动画无法继承悬停时backcolor动画的当前进度，导致直接跳转到动画起点再反向播放。下面是修复后的实现方案：

纯CSS解决方案（无需JS） #

通过单一动画+状态控制实现从当前进度反向过渡的效果：

.side-nav {
  /* 基础渐变背景设置 */
  background: linear-gradient(#00bcd4, #e91e63, #3f51b5, #00bcd4);
  background-size: 100% 500%;
  background-position: 0 40%;
  
  /* 初始状态：反向动画+暂停，确保默认显示初始位置 */
  animation: backcolor 2s linear reverse paused;
}

/* 定义唯一的背景位置动画 */
@keyframes backcolor {
  from { background-position: 0 40%; }
  to { background-position: 0 400%; }
}

/* 鼠标悬停时：切换为正向、慢速度播放动画 */
.side-nav:hover {
  animation-duration: 20s;
  animation-direction: normal;
  animation-play-state: running;
}

/* 鼠标移出时：切换为反向、快速度播放动画，从当前位置往回过渡 */
.side-nav:not(:hover) {
  animation-duration: 2s;
  animation-direction: reverse;
  animation-play-state: running;
}

方案说明 #

• 只定义一个backcolor动画，避免两个独立动画的状态断裂问题
• 初始状态通过reverse paused让动画停在初始位置（0 40%）
• 悬停时调整动画时长为20s、切换正向并播放，实现缓慢的渐变滚动
• 移出时切回2s时长、反向并播放，动画会从当前进度位置直接反向过渡到初始状态，不会出现跳跃

为什么原代码会失效？ #

原代码中:hover和默认状态使用了两个完全独立的动画：

• 悬停时运行backcolor动画，进度会随时间推进
• 移出时触发out动画，这个动画的起始位置是固定的0 400%，不会继承backcolor的当前进度，所以会直接跳转到该位置再播放，导致视觉上的跳跃感。

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