csscss-animations

How to play an animation on hover and pause when hover is not active

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?

Solution

  • Use animation instead of transition and make use of animation-play-stateMDN

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