JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="street">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div
CSS
@keyframes moving {
from {
transform: translateX( 0 ) translateZ( 0 );
}
to {
transform: translateX( -15% ) translateZ( 0 );
}
}
.container {
width: 600px;
height: 100px;
background: #333;
}
.street {
position: relative;
height: 6px;
width: 120%;
top: 48px;
will-change: transform;
animation: moving 1.5s linear infinite;
}
.block {
display: block;
float: left;
position: relative;
z-index: 2;
background: #fff;
width: 7%;
height: 100%;
margin: 0 4%;
}
.block:first-child {
margin-left: 0;
}
.block:last-child {
margin-right: 0;
}