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

Here's a simple working solution:

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

.elem:hover {
    -webkit-animation:spin 1.5s linear infinite;
    -moz-animation:spin 1.5s linear infinite;
    animation:spin 1.5s linear infinite;
}