JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>

CSS

#div1{
        position:absolute;
        top:10%;
        left:50px;    
        background:black;
        height:40px;
        width:40px;
        -webkit-animation-name:moveTobottom;
        -webkit-animation-duration:1s;
        -webkit-animation-fill-mode: forwards;
    }

    #div2{
        position:absolute;
        top:10%;
        left:200px;    
        background:black;
        height:40px;
        width:40px;
        -webkit-animation-name:moveTobottom;
        -webkit-animation-duration:2s;
        -webkit-animation-delay:1s;
        -webkit-animation-fill-mode: forwards;
    }

    #div3{
        position:absolute;
        top:10%;
        left:350px;    
        background:black;
        height:40px;
        width:40px;
        -webkit-animation-name:moveTobottom;
        -webkit-animation-duration:1s;
        -webkit-animation-delay:2s;
        -webkit-animation-fill-mode: forwards;
    }

@-webkit-keyframes moveTobottom{
    from{top:10%;}
    to{top:30%;}
}