CSS如何实现停止旋转动画不重置角度，悬停离开时冻结当前位置

你当前实现出现旋转复位的核心原因是animation属性仅在:hover伪类下声明，鼠标移出后动画属性被移除，元素会回到未应用动画的初始状态。我们可以通过控制动画播放状态而非动态增删动画的方式实现冻结效果，无需引入JavaScript。

修改后的完整代码 #

<style>
.rotatingDiv {
  width: 50px;
  height: 30px;
  background-color: red;
  margin: auto;
  margin-top: 10rem;
  cursor: pointer;
  /* 动画默认绑定在元素上，初始状态为暂停 */
  animation: spin 4s linear infinite;
  animation-play-state: paused;
}

.rotatingDiv:hover {
  /* hover时仅修改播放状态为运行 */
  animation-play-state: running;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

<body>
  <div class="rotatingDiv"> </div>
</body>

原代码调整说明 #

• 原代码误将CSS样式写在了<script>标签内，修正为放在<style>标签中保证样式生效
• 调整后动画全程绑定在元素上，仅通过animation-play-state控制启停，鼠标移出后动画回到暂停状态，会自然停在当前播放到的旋转角度，不会复位到0deg。

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