如何实现CSS动画hover时减速停止、mouseleave时恢复无限循环？

核心思路是不重新触发动画，通过修改已有动画的参数（时长）结合过渡效果实现减速，再配合动画播放状态控制暂停/续播，避免位置重置。

实现代码示例 #

HTML结构

<div class="marquee-container">
  <div class="marquee-content">这是一条需要滚动的跑马灯内容，长度要足够长才能看到完整效果</div>
</div>

CSS样式

/* 定义滚动动画 */
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.marquee-container {
  overflow: hidden;
  width: 100%;
  background: #f5f5f5;
  padding: 8px 0;
}

.marquee-content {
  display: inline-block;
  white-space: nowrap;
  /* 用CSS变量控制动画时长，方便动态修改 */
  --duration: 10s;
  animation: scroll var(--duration) linear infinite;
  /* 给时长变量添加过渡，实现平滑减速 */
  transition: --duration 0.8s ease-out;
}

/* 悬停时：先通过过渡拉长时长实现减速，延迟后暂停动画 */
.marquee-container:hover .marquee-content {
  --duration: 1000s;
  animation-play-state: paused;
  transition-delay: 0.8s;
}

/* 离开时：恢复原时长，继续播放动画 */
.marquee-container:not(:hover) .marquee-content {
  --duration: 10s;
  animation-play-state: running;
  transition-delay: 0s;
}

关键原理说明 #

1. 用CSS变量控制动画时长：避免重新声明animation属性（这会导致动画重置），仅修改变量值来调整动画速度。
2. 过渡效果实现减速：给--duration添加过渡，让时长从初始值平滑过渡到极大值，视觉上呈现减速效果。
3. 动画播放状态控制：悬停延迟一段时间后暂停动画，确保已经减速到接近停止；离开时恢复播放，动画从当前位置继续滚动，不会重置。

补充注意事项 #

• 若内容长度不足容器宽度，可复制多份内容（如<div class="marquee-content">内容 内容 内容</div>），确保能触发滚动效果。
• 可调整transition的时长（0.8s）和--duration的初始/悬停值，适配不同的减速节奏和滚动速度。

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