JSFiddle - React, Tailwind, and code Playground

HTML

<div id="raysDemoHolder">
        <div id="rays"></div>
    </div>

CSS

@-webkit-keyframes spin {
   from {
        -webkit-transform: rotate(0deg);
   }
   to {
        -webkit-transform: rotate(360deg);
   }
  }
 
  @-moz-keyframes spin {
   from {
        -moz-transform: rotate(0deg);
   }
   to {
        -moz-transform: rotate(360deg);
   }
  }
 
  @-ms-keyframes spin {
   from {
        -ms-transform: rotate(0deg);
   }
   to {
        -ms-transform: rotate(360deg);
   }
  }
 
  #raysDemoHolder {
   position: relative;
   width: 47px;
   height: 47px; 
  }
  #rays {
   background: url(http://aseman.xzn.ir/wp-content/uploads/2015/01/gear.png) 0 0 no-repeat;
   position: absolute;
margin:px 0px 0px 0px;
   width: 47px;
   height: 47px;
   -webkit-animation-name: spin;
   -webkit-animation-duration: 10000ms; /* 40 seconds */
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
  
   -moz-animation-name: spin;
   -moz-animation-duration: 10000ms; /* 40 seconds */
   -moz-animation-iteration-count: infinite;
   -moz-animation-timing-function: linear;
  
   -ms-animation-name: spin;
   -ms-animation-duration: 10000ms; /* 40 seconds */
   -ms-animation-iteration-count: infinite;
   -ms-animation-timing-function: linear;
  
   /* boooo opera */
   -o-transition: rotate(3600deg); /* works */
  }
 
  #rays:hover {
   /* -webkit-animation-duration: 10000ms; 10 seconds - speed it up on hover! */
  }