如何用纯CSS让意外停止的旋转图标动画优雅完成至结束关键帧

首先，你遇到的问题核心是transition和animation不能同时作用于同一个CSS属性（这里是transform），因为动画的优先级更高，所以你加的transition完全没生效。另外，直接在hover时用infinite动画，移除hover后元素会立刻跳回初始状态，不会完成当前的循环。

不过确实有纯CSS的方法实现你想要的效果——让动画在停止前完成当前的关键帧循环，具体思路是利用CSS动画的连贯性：当切换相同关键帧、相同时长的动画时，浏览器会继续当前的动画进度，完成剩余部分再切换到新的动画规则。

修正后的代码（适配你原有的半圈旋转逻辑）： #

@keyframes rotation {
  from { transform: rotate(180deg); }
  to { transform: rotate(0deg); }
}

.loop {
  /* 初始状态与动画起始帧一致 */
  transform: rotate(180deg);
  /* 非hover状态：单次动画，执行完停在结束帧 */
  animation: rotation 400ms linear forwards;
}

.loop:hover {
  /* hover状态：无限循环动画 */
  animation: rotation 400ms linear infinite;
}

原理说明： #

1. 非hover状态：元素默认绑定单次循环的动画，forwards关键字会让动画结束后保持to帧的状态（也就是rotate(0deg)），默认情况下这个动画不会执行——直到hover状态被移除。
2. hover状态：覆盖为无限循环的动画，元素开始持续重复半圈旋转。
3. 移除hover时：浏览器会自动切换回单次循环的动画，由于两个动画的关键帧、时长完全一致，它会继续当前的旋转进度，完成剩下的半圈后，停在to帧的状态，不会出现跳帧。

如果需要停止后回到初始状态（180deg）： #

如果你希望动画停止后回到初始的rotate(180deg)，可以调整关键帧为完整的360度旋转，这样每次循环是平滑的一圈，移除hover时会完成当前整圈后回到初始角度：

@keyframes smooth-rotation {
  from { transform: rotate(180deg); }
  to { transform: rotate(540deg); } /* 180+360，完成一圈回到初始角度 */
}

.loop {
  transform: rotate(180deg);
  animation: smooth-rotation 400ms linear forwards;
}

.loop:hover {
  animation: smooth-rotation 400ms linear infinite;
}

这样调整后，hover时元素会平滑地360度旋转，移除hover后会完成当前的一圈旋转，最终回到rotate(180deg)的初始状态，完美解决“意外停止时不跳帧”的问题。

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