如何在悬停时播放动画并在悬停未激活时暂停答案

【问题标题】：How to play an animation on hover and pause when hover is not active如何在悬停时播放动画并在悬停未激活时暂停
【发布时间】：2021-09-24 21:38:38
【问题描述】：

我有一个按钮，当鼠标悬停在它上面时我想旋转它。然而，当鼠标进入时旋转会起作用，当鼠标离开时它也会旋转。这就是我的意思：

button {
  transition: transform 1.2s linear;
}

button:hover {
  transform: rotate(360deg);
}

&lt;button&gt;X&lt;/button&gt;

有什么方法可以让鼠标进入时让鼠标旋转？

【问题讨论】：

标签： css css-animations

【解决方案1】：

使用animation 代替transition 并使用animation-play-state^MDN

button{
  animation: rotate360 1.2s linear infinite;  /* animation set */
  animation-play-state: paused;               /* but paused */
}
button:hover{
  animation-play-state: running;              /* trigger on hover */
}
@keyframes rotate360 {
  to { transform: rotate(360deg); }           
}

&lt;button&gt;X&lt;/button&gt;

【讨论】：

【解决方案2】：

试试这个sn-p

button:hover {
  transition: transform 1.2s linear;
  transform: rotate(360deg);
}

<button>
X
</button>

【讨论】：

行得通！我是如此接近。有没有办法让按钮停留在用户鼠标离开时的位置？
@MarksCode 我猜 CSS 不可能。你熟悉 jQuery 吗？
我是！我在找那个

【解决方案3】：

试试这个

button:hover {
  transform: rotate(360deg);
  transition: transform 1.2s linear;
}

<button>
X
</button>

【讨论】：

【解决方案4】：

在前面的示例中，当鼠标离开元素时，过渡会非常突然地重置为第一个状态。最好让过渡回放。

在这个例子中，当鼠标悬停和离开时，按钮是动画的：

button {
   transition: transform 1.2s linear;
}
button:hover {
   transform: rotate(360deg);
}

<button>
X
</button>

【讨论】：