如何修改CSS代码实现鼠标悬停时盒子逐步减速停止旋转？

要实现盒子逐步减速至停止的效果，核心是避免直接通过animation-play-state硬切换动画状态，而是通过CSS自定义变量+过渡动画来控制抵消动画的速度，让盒子的旋转速度平滑降低到0。

修改后的代码 #

div.box {
  border: 6px solid black;
  background-color: blue;
  width: 100px;
  height: 100px;
  /* 盒子保持匀速旋转的基础动画 */
  animation: turnright 2s linear 0s infinite normal;
}

div.boxcontainer {
  display: flex;
  width: 112px;
  height: auto;
  border: 6px solid red;
  /* 用自定义变量控制反向抵消动画的时长，初始值极大，几乎不旋转 */
  --reverse-duration: 1000s;
  animation: turnright var(--reverse-duration) linear 0s infinite reverse;
  /* 添加过渡效果，让时长变化平滑 */
  transition: --reverse-duration 0.8s ease-out;
}

/* 鼠标悬停时，让反向动画时长逐步过渡到与盒子动画一致，完全抵消旋转 */
div.boxcontainer:hover {
  --reverse-duration: 2s;
}

@keyframes turnright {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}

<div class='boxcontainer'>
  <div class='box'></div>
</div>

原理说明 #

1. 盒子默认保持linear匀速旋转，确保正常状态下始终维持最大转速，不会出现反复缓入的问题。
2. 容器的反向动画通过自定义变量--reverse-duration控制时长：初始时时长极大（1000s），反向旋转速度几乎为0，不影响盒子的正常旋转。
3. 鼠标悬停时，--reverse-duration通过transition平滑过渡到2s（与盒子动画时长一致），容器的反向旋转速度逐渐增加，逐步抵消盒子的正向旋转，最终让盒子平滑减速至停止。
4. 调整transition的时长（比如0.8s）可以控制减速的快慢，数值越大，减速过程越平缓。

参考思路说明 #

参考的文章核心思路是：避免直接使用animation-play-state切换动画的播放/暂停状态（这种方式会导致生硬的状态跳转），而是通过CSS变量控制动画的关键参数（如时长、速度），并结合transition属性让参数变化平滑过渡，从而实现动画的自然减速或还原效果。

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