JSFiddle - React, Tailwind, and code Playground

by Minko Gechev

HTML

<div class="test"></div>

CSS

.test {
    width: 50px;
    height: 50px;
    background-color: red;
    display: inline-block;
    -webkit-animation: mykf 5s infinite;
    -webkit-transform: translate(0px, 0px);
}

@-webkit-keyframes mykf {
    10% {
            -webkit-transform: translate(190px, 120px);
    }
    50% {
        -webkit-transform: rotateZ(90deg);
    }
    51% {
        width: 150px;
        height: 150px;
    }
    52% {
        background-color: yellow;
    }
    53% {
        border-radius: 75px;
    }
    54% {
        -webkit-transform: rotateY(90deg);
    }
    70% {
        -webkit-transform: translate(110px, 200px);
    }
}