How to play animation on hover?
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>Try this snippet
button:hover {
transition: transform 1.2s linear;
transform: rotate(360deg);
}<button>
X
</button>