如何让CSS hover触发的关键帧动画在鼠标移出时平滑停止？

你遇到的核心问题是：@keyframes动画在停止时会直接重置到初始状态，常规的transition无法作用于动画本身的状态变化。下面提供一个纯CSS的解决方案，既能实现hover时持续旋转，又能在鼠标移出时平滑过渡回初始状态。

核心思路 #

• 用CSS自定义属性（变量）记录当前旋转角度
• hover时通过动画持续更新旋转变量，实现无限旋转
• 移出hover时，利用transition让元素从当前旋转角度平滑过渡到0度

完整代码 #

@keyframes rotating {
  to { --rotate-angle: 360deg; }
}

#cube {
  width: 100px;
  height: 100px;
  background: red;
  /* 定义旋转变量，初始为0度 */
  --rotate-angle: 0deg;
  transform: rotate(var(--rotate-angle));
  /* 移出时的平滑过渡效果 */
  transition: transform 3s linear;
}

#cube:hover {
  /* hover时启动无限旋转动画，持续更新旋转变量 */
  animation: rotating 12s linear infinite;
  /* 禁用hover时的过渡，避免动画卡顿 */
  transition: none;
}

<div id="cube">Hover to rotate, smooth stop on leave</div>

原理说明 #

1. 自定义属性--rotate-angle用来存储当前的旋转角度，元素的transform完全基于这个变量计算，保证旋转状态可追踪。
2. hover状态下，rotating动画会循环将--rotate-angle从当前值更新到360deg，从而实现持续旋转；同时禁用transition，防止动画过程中出现过渡卡顿。
3. 当鼠标移出时，动画立即停止，--rotate-angle会停在当前的旋转角度，此时元素默认的transition生效，transform会从当前角度平滑过渡到初始的0度，彻底解决跳回问题。

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