如何通过CSS或JS实现鼠标悬停时平滑中断CSS动画

为什么动画运行/中断后transition不生效 #

核心是两个CSS规则的机制问题：

• 动画的属性控制权优先级更高：按照CSS级联规范，运行中的CSS动画对属性的修改优先级，高于普通样式（包括类选择器、:hover这类伪类选择器里的属性声明）。只要动画还处于激活状态，transition根本拿不到对应属性的变更权限，自然无法触发过渡。
• 直接移除动画会触发值跳变：如果直接在:hover里写animation: none，这个操作是瞬时执行的——动画被移除的瞬间，它之前持续修改的属性值会直接被丢弃，元素会瞬间切回无动画状态下的属性默认值，这时候再应用悬停态的属性值属于瞬时跳变，transition没有连续的数值区间可以做插值计算，当然不会有平滑效果。

鼠标悬停平滑中断运行中CSS动画的实现方案 #

纯CSS方案（无JS，适合简单场景） #

核心思路是把动画的修改目标和transition的控制对象拆开，不要让两者争抢同一个属性的控制权：用CSS动画修改自定义属性（CSS变量），让transition只控制实际渲染的实体属性。
参考代码：

.button {
  /* 定义缩放的自定义属性，给初始值 */
  --btn-scale: 1;
  /* 动画只修改自定义属性，不直接操作transform */
  animation: resizing 2000ms linear infinite alternate;
  /* transform读取自定义属性的值，完全交给transition管控 */
  transform: scale(var(--btn-scale));
  transition: transform 200ms linear;
}

@media (hover: hover) {
  .button:hover {
    /* 悬停时先暂停动画，不要直接移除，避免自定义属性瞬间跳回初始值 */
    animation-play-state: paused;
    /* 直接修改自定义属性到悬停目标值，transition会自动接管平滑过渡 */
    --btn-scale: 1.1;
  }
}

@keyframes resizing {
  100% {
    /* 关键帧里只修改自定义属性 */
    --btn-scale: 2;
  }
}

这个方案鼠标移出后，动画会自动恢复运行，状态衔接自然，不需要额外写逻辑。

JS方案（通用，适配所有复杂场景） #

核心思路是在悬停瞬间先固定住动画当前的计算值，再移除动画，保证属性值是连续变化的，让transition能正常识别插值区间。
参考代码：

/* CSS部分移除hover状态下的animation: none声明 */
.button {
  animation: resizing 2000ms linear infinite alternate;
  transition: transform 200ms linear;
}

@media (hover: hover) {
  .button:hover {
    transform: scale(1.1);
  }
}

@keyframes resizing {
  100% {
    transform: scale(2);
  }
}

const button = document.querySelector('.button')

button.addEventListener('mouseenter', () => {
  // 读取当前动画运行到的实际transform值
  const currentTransform = getComputedStyle(button).transform
  // 把当前值写到内联样式，固定住当前视觉状态，避免移除动画时值跳变
  button.style.transform = currentTransform
  
  // 下一帧再移除动画、清空内联transform，让悬停态的样式生效
  requestAnimationFrame(() => {
    button.style.animation = 'none'
    button.style.transform = ''
  })
})

// 鼠标移出后恢复动画
button.addEventListener('mouseleave', () => {
  button.style.animation = ''
})

这个方案不管动画控制了多少个属性、动画逻辑多复杂都能兼容，不需要额外调整原有动画的代码。

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