JSFiddle - React, Tailwind, and code Playground

by styaue

HTML

<div id="leaf"></div>

CSS

#leaf {         
    height:100px;
    width:100px;
background: #f00;
    animation: leaf 10s infinite;
    -webkit-animation: leaf 10s infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    
}                                                                                   

@keyframes leaf {
    0% {
      transform: translate(0, 0px) rotateZ(0deg);
}
    75% {
      transform: translate(200px, 300px) rotateZ(270deg); }                                                                           
    100% {
            transform: translate(0px, 600px) rotateZ(360deg);}
}                                                                                   

@-webkit-keyframes leaf {
    0% {
            -webkit-transform: translate(0, 0px) rotateZ(0deg);
    }
    75% {
-webkit-transform: translate(200px, 300px) rotateZ(270deg); }
    100% {
            -webkit-transform: translate(0px, 600px) rotateZ(360deg);}                                                                           
}