JSFiddle - React, Tailwind, and code Playground
HTML
<div class="cloud1 cloud">1</div>
<div class="cloud2 cloud">2</div>
<div class="cloud3 cloud">3</div>
<div class="cloud4 cloud">4</div>
<div class="cloud5 cloud">5</div>
<div class="cloud6 cloud">6</div>
CSS
.cloud {
position:absolute;
left:-50px;
width:50px;
height:50px;
color: #FFFFFF
}
.cloud1 { top:260px;background-color:#F00;}
.cloud2 { top:230px;background-color:#FF0;}
.cloud3 { top:300px;background-color:#F0F;}
.cloud4 { top:240px;background-color:#0FF;}
.cloud5 { top:330px;background-color:#000;}
.cloud6 { top:220px;background-color:#0F0;}
JavaScript
function links() {
for(i = 1; i < 7; i++) {
$(".cloud" + i).delay((i-1)*5000).animate({
left : "+100%"
}, 10000, 'linear', function() {
$(this).css({
left : "-50px"
});
links();
});
}
}
links();