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

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

X