JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div class="animated"></div>

CSS

.animated{
  width:50px;
  height:50px;
  margin:50px auto;
  border-radius:50%;
  background:linear-gradient(to bottom, red 33%, green 33%, green 66%, blue 66%);
}

JavaScript

(function(){
	var element = document.querySelector(".animated");
  var tD = 3000;
  var interval;
  element.onmouseover = animate;
  element.onmouseout = stop;
  var isHover = false;
  function animate(){
    if(!interval && !isHover){
      element.style.transition = "none 0";
      var j = 1;
      isHover = true;
      setTimeout(function(){
        element.style.transition = "transform 3s linear";
        element.style.transform = "rotate(" + 360*j + "deg)";	
        interval = setInterval(function(){
          if(isHover){
            j++;
            element.style.transform = "rotate(" + 360*j + "deg)";
          }
          else{
            clearInterval(interval);
            element.style.transition = "none";
            element.style.transform = "rotate(0)";
            interval = false;
          }
        }, 3000);
      }, 30);
    }
    else{
      return false;
    }
  }
  function stop(){
    isHover = false; 
  }
})();