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. Seem to be working in FireFox, but not Chrome or Safari -->

CSS

.box {
    position: absolute;
    top: 40px;
    left: 40px;
    height: 100px;
    width: 100px;
    background: #000;
    -webkit-transition: -webkit-transform 2s; /* Not working */
            transition: transform 2s; /* Working */
}
.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);
    }
}