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

Question

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?

Answer 1

Use animation instead of transition and make use of 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;              /* Run on hover! */
}
@keyframes rotate360 {
  to { transform: rotate(360deg); }           
}

<button>X</button>

Answer 2

Try this snippet

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

<button>
X
</button>

Answer 3

In previous examples when mouse leaves an element the transition resets to first state very suddenly. It's better to make the transition play back.

In this example button is animated when mouse is hovering and when mouse left it:

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

<button>
X
</button>

Answer 4

try this

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

<button>
X
</button>