JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>

CSS

body {
    overflow-x: hidden;
}

.box-wrapper {
    -webkit-transition-duration: 600ms;
    transition-duration: 600ms;
}

.box-wrapper.loading:nth-child(odd) {
    transform: translate(100%);
    -webkit-transform: translate(100%);    
}

.box-wrapper.loading:nth-child(even) {
    transform: translate(-100%);        
    -webkit-transform: translate(-100%);
}





.box-wrapper:nth-child(odd) .box {
    background: orange;
}

.box-wrapper:nth-child(even) .box {
    background: red;
}


.box {
    content: "";
    display: block;
    margin: auto;
    width: 100px;
    height: 100px;
}

JavaScript

$('.box-wrapper').each(function(index, element) {
    
    setTimeout(function(){
        element.classList.remove('loading');
    }, index * 500);

});