JSFiddle - React, Tailwind, and code Playground

by irina675

HTML

<div style="width:100px; height:100px; background-color:red" class="class" ></div>

CSS

.class{
	animation-name:out;
	animation-duration:2s;
	/* Safari and Chrome: */
	-webkit-animation-name:out;
	-webkit-animation-duration:2s;
}

.class:hover{
animation-name:in;
animation-duration:5s;
animation-iteration-count:infinite;
animation-direction:normal;
/* Safari and Chrome: */
-webkit-animation-name:in;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
}

@keyframes in
{
from {transform: rotate(50deg);}
to   {transform: rotate(360deg);}
}
@-webkit-keyframes in /* Safari and Chrome */
{
from {transform: rotate(50deg);}
to   {-webkit-transform: rotate(360deg);}
}
@keyframes out
{
from {transform: rotate(360deg);}
to   {transform: rotate(0deg);}
}
@-webkit-keyframes out /* Safari and Chrome */
{
from {transform: rotate(360deg);}
to   {-webkit-transform: rotate(0deg);}
}