Continuous CSS rotation animation on hover, animated back to 0deg on hover out

Question

I have an element that spins when you hover over it indefinitely. When you hover out, the animation stops. Simple:

@-webkit-keyframes rotate {
    from {
            


        

Answer 1

Cross browser compatible JS solution:

var e = document.getElementById('elem');
var spin = false;

var spinner = function(){
e.classList.toggle('running', spin);
if (spin) setTimeout(spinner, 2000);
}

e.onmouseover = function(){
spin = true;
spinner();
};

e.onmouseout = function(){
spin = false;
};

body { 
height:300px; 
}
#elem {
position:absolute;
top:20%;
left:20%;
width:0; 
height:0;
border-style: solid;
border-width: 75px;
border-color: red blue green orange;
border-radius: 75px;
}

#elem.running {
animation: spin 2s linear 0s infinite;
}

@keyframes spin { 
100% { transform: rotate(360deg); } 
}