JSFiddle - React, Tailwind, and code Playground
HTML
<div class="pista">
<div class="carro" id="carro1"></div>
<div class="carro" id="carro2"></div>
<div class="carro" id="carro3"></div>
</div>
CSS
.pista {
height: 100px;
background-color: #ccc;
position: relative;
}
.carro {
position: absolute;
width: 80px;
height: 35px;
background-color: red;
}
#carro1 {
right: 100px;
top: 10px;
}
#carro2 {
right: 130px;
bottom: 10px;
}
#carro3 {
right: 200px;
top: 10px;
}
/* animação */
.carro {
transform: translateX(-2000px);
transition: transform 1s;
}
.largada .carro {
transform: translateX(0);
}
#carro2 {
transition-delay: 0.2s;
}
#carro3 {
transition-delay: 0.4s;
}
JavaScript
setTimeout(function() {
var pista = document.querySelector('.pista');
pista.className += ' largada';
}, 1000);