CSS实现：鼠标悬停时让动画完成周期后再暂停

我之前也碰到过这个棘手的问题！CSS原生的动画控制属性确实没法直接实现“跑完当前周期再暂停”的效果，不过结合一点点JavaScript就能完美解决。先来说说核心思路：我们需要监听动画的每一次迭代完成事件，当检测到鼠标悬停时，让动画完成当前这一轮循环后自动停止；当鼠标离开时，再重新开启无限循环。

为什么你之前的方法行不通？ #

• animation-play-state: paused：这个属性的作用就是立即冻结动画当前状态，不管它正处于周期的哪个阶段，所以没法完成剩余的动画。
• animation: none：会直接移除动画并将元素重置到初始状态，过渡肯定生硬。
• transition：过渡是针对属性值的平滑变化，和CSS动画的帧动画机制不兼容，没法衔接动画到静止状态的过程。
• animation-iteration-count: 1：在动画已经运行时修改这个属性，浏览器的处理时机不稳定，有时候会提前终止，有时候又会多跑一轮，所以效果不可控。

完整解决方案代码 #

@keyframes bounce {
  0% { right: 0; }
  10% { right: 0.5em; }
  20% { right: 0; }
  30% { right: 0.5em; }
  40% { right: 0; }
  100% { right: 0; }
}

.container {
  padding: 2rem;
  /* 给容器加个hover提示的光标，提升交互体验 */
  cursor: pointer;
}

.icon {
  position: relative;
  animation-name: bounce;
  animation-duration: 4s;
}

/* 用类来标记无限循环状态 */
.icon.infinite {
  animation-iteration-count: infinite;
}

<div class="container">
  <span class="icon infinite">&gt;</span> Some text
</div>

const container = document.querySelector('.container');
const icon = document.querySelector('.icon');
let isHovering = false;

// 监听动画每一次迭代完成的事件
icon.addEventListener('animationiteration', () => {
  // 如果当前处于悬停状态，就移除无限循环类，让动画跑完当前轮次后停止
  if (isHovering) {
    icon.classList.remove('infinite');
  }
});

// 鼠标进入容器时标记悬停状态
container.addEventListener('mouseenter', () => {
  isHovering = true;
});

// 鼠标离开容器时重置状态，重新开启无限循环
container.addEventListener('mouseleave', () => {
  isHovering = false;
  // 确保动画还能重新启动
  if (!icon.classList.contains('infinite')) {
    // 这里可以强制触发重绘，避免浏览器缓存状态导致动画不重启
    void icon.offsetWidth;
    icon.classList.add('infinite');
  }
});

方案原理说明 #

1. 我们用infinite类来控制动画是否处于无限循环状态，而不是直接写在CSS里，这样能更灵活地动态修改。
2. animationiteration事件会在每一次动画周期完成时触发，这时候我们检查是否有悬停标记，如果有，就移除无限循环类，让动画完成当前这一次后就停止（因为默认的animation-iteration-count是1）。
3. 鼠标离开时，我们重新添加infinite类，让动画再次进入无限循环状态。这里的void icon.offsetWidth是用来强制浏览器重绘元素，避免因为CSS属性缓存导致动画不重启的问题。

这个方案能完美实现你要的效果：鼠标悬停时，动画会平滑完成当前的弹跳周期，然后停在初始位置；鼠标离开后，动画立刻重新开始无限弹跳。

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