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

Question

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

 button {
  transition: transform 1.2s linear;
}

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

 <button>X</button>

有没有什么办法可以让鼠标在鼠标进入时旋转？

原文由 MarksCode 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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); }
}

 <button>X</button>

原文由 Roko C. Buljan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

尝试这个

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

 <button>
X
</button>

原文由 Yaser Ali Peedikakkal 发布，翻译遵循 CC BY-SA 3.0 许可协议