JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">TEST</div>

CSS

#test {
    width: 60px;
    animation: in 1s;
}

#test:hover {
    animation: out 1s;
}

@keyframes in {
    from   { transform: rotate(0deg); }
    to { transform: rotate(360deg);}
}

@keyframes out {
    0%   { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}