如何在悬停时播放动画？ [英] How to play animation on hover?

问题描述

当鼠标悬停在按钮上时，我想旋转一个按钮。但是，虽然在鼠标进入时旋转有效，但在鼠标离开时也会旋转。这是我的意思：

I have a button that I want to rotate when the mouse hovers over it. However, while the spinning works when the mouse enters, it also spins when the mouse leaves. Here is what I mean:

button {
  transition: transform 1.2s linear;
}

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

<button>X</button>

有没有鼠标进入时仅使鼠标旋转的方法？

Is there any way to just make the mouse spin when the mouse enters?

推荐答案

使用动画代替 transition 并使用 动画播放状态 ^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>

这篇关于如何在悬停时播放动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！