Hover animation

by Silambarasan_sundaram

HTML

<div class="elem"></div>

CSS

.elem{
    position:absolute;
    top:20%;
    left:20%;
    width:150px; 
    height:150px;
    background:#f00;
}
.spin {
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 1.5s; 
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}
@-webkit-keyframes rotate {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

JavaScript

var isHovering = false;
var el = $(".elem").mouseover(function(){
    isHovering = true;
    spin();
}).mouseout(function(){
    isHovering = false;
});
var spin = function(){
    if(isHovering){
        el.removeClass("spin");
        
        setTimeout(function(){
            el.addClass("spin");
            
            setTimeout(spin, 1500);
        }, 0);
    }
};
spin();