JSFiddle - React, Tailwind, and code Playground

HTML

<div id="foo"></div>

CSS

/* Standard-CSS */
html, body {
    height: 100%;
    position: relative;
    margin: 0;
    padding: 0;
}
div {
    position: absolute;
    background: pink;
    display: block;
    width: 10%;
    height: 10%;
    -moz-animation: animation1 4s linear 0s infinite alternate;
}
@-moz-keyframes animation1 {
    0% {
        width:10%;
        height:10%;
        top:0;
        left:0;        
        -moz-transform:rotate(0deg);     
        -webkit-transform:rotate(0deg);    
        background-color:green; 
    }
    50% {
        width:20%;
        height:20%;
        top:40%;
        left:40%;          
        background-color:red;  
        -moz-transform: rotateX(145deg) rotateY(293deg) rotateZ(299deg);
    }
    100% {
        width:10%;
        height:10%;
        top:90%;
        left:90%;                    
        -webkit-transform:rotate(360deg); 
        background-color:blue;  
        -moz-transform: rotate(360deg);        
    }
}