JSFiddle - React, Tailwind, and code Playground

by khalednabil

CSS

#.div{
	animation-name:BACKrotateAndShake;
	animation-duration:2s;
	/* Safari and Chrome: */
	-webkit-animation-name:BACKrotateAndShake;
	-webkit-animation-duration:2s;
}

.div:hover{
animation-name:rotateAndShake;
animation-duration:5s;
animation-iteration-count:infinite;
animation-direction:normal;
/* Safari and Chrome: */
-webkit-animation-name:rotateAndShake;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
	
/*transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
/*-webkit-transform: rotate(30deg); /* Safari and Chrome */

}

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