JSFiddle - React, Tailwind, and code Playground

by omarqa

HTML

<div id="div1"> </div>
<div id="div2" class="classname"></div>

CSS

#div1{
    height:300px;
    width:300px;
    background-color:red;
    
    /*transform:matrix(1,0,0,1,100,100);*/
    /*transform:translate(100px,100px);*/
    
    -webkit-animation: bounce 1s 0s linear infinite alternate;
    animation: bounce 1s 0s linear infinite alternate;
    /*transform:translate(100px,100px);*/
}
#div2{
    height:300px;
    width:300px;
    background-color:green;
    
    /*transform:matrix(1,0,0,1,100,100);
    transform:translate(100px,100px);
    
    -webkit-animation: bounce 1s 0s linear infinite alternate;
    animation: bounce 1s 0s linear infinite alternate;
    transform:translate(100px,100px);*/
    transform:rotate(45deg 100);
}

@-webkit-keyframes  bounce { from { transform:matrix(0.5,0,0,1,0,0); } to {  transform:matrix(1,0,0,0.5,0,0); } }
@keyframes bounce { from { transform:matrix(0.5,0,0,1,0,0); } to { transform:matrix(1,0,0,0.5,0,0); } }


.classname {
-webkit-animation: cssAnimation 1s infinite;
-moz-animation: cssAnimation 1s infinite;
-o-animation: cssAnimation 1s infinite;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(19deg) scale(1) skew(1deg) translate(0px); }
to { -moz-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(19deg) scale(1) skew(1deg) translate(0px); }
to { -o-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
}