How to play animation on hover?

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

Answer 1

Try this snippet

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

<button>
X
</button>

Answer 2

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;              /* trigger on hover */
}
@keyframes rotate360 {
  to { transform: rotate(360deg); }           
}

<button>X</button>

Answer 3

try this

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

<button>
X
</button>

Answer 4

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>