JSFiddle - React, Tailwind, and code Playground
HTML
<div class="elem"></div>
CSS
.elem{
position:absolute;
top:20%;
left:20%;
width:0;
height:0;
border-style: solid;
border-width: 75px;
border-color: red blue green orange;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
transition-property: transform;
transition-duration: 5s;
}
.elem:hover {
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
/* alternatively shorthand
-webkit-animation: rotate 2s infinite linear;
*/
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
/* alternatively shorthand
animation: rotate 2s infinite linear;
*/
}
@-webkit-keyframes rotate {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}