JSFiddle - React, Tailwind, and code Playground

by c_vilander

HTML

<div class="box"></div>

<!-- A quick test to see if the transition will kick in when the animation stops. Seems to be working in Firefox, but not in Chrome or Safari. Not tested in IE / @c_vilander -->

CSS

.box {
    position: absolute;
    top: 40px;
    left: 40px;
    height: 100px;
    width: 100px;
    background: #000;
    -webkit-transition: 2s;
            transition: 2s;
}

.box:hover {
    -webkit-animation: rotate 5s linear infinite;
            animation: rotate 5s linear infinite;
}

@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

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