JSFiddle - React, Tailwind, and code Playground
HTML
<div id="main"></div>
<div id="test" class="test"></div>
CSS
#main{
display:block;
width:100vw;
height:100vh;
background-color:blue;
}
.test{
position:absolute;
display:none;
width:100px;
height:100px;
background-color:red;
transition: left 1s ease;
transform: scale(1);
left:0px;
}
JavaScript
function move(color){
let clone=document.getElementById("test").cloneNode(true);
clone.id=color;
clone.style.display="block";
clone.style.backgroundColor=color;
document.getElementById("main").prepend(clone);
setTimeout(function(){
clone.style.left="500px";
},0)
}
setTimeout(function(){move("red")},500);
setTimeout(function(){move("green")},750);