JSFiddle - React, Tailwind, and code Playground

by ericwilligers

HTML

<div id="first" class="car">o o</div>
<div id="second" class="car">o o</div>
<div id="third" class="car">o o</div>
<div id="fourth" class="car">o o</div>
<div id="fifth" class="car">o o</div>

CSS

.car {
    motion-path: path('M 50 , 300 C 50 , 0 740 , 600 740 , 300 C 740 , 0 50 , 600 50 , 300');
    offset-path: path('M 50 , 300 C 50 , 0 740 , 600 740 , 300 C 740 , 0 50 , 600 50 , 300');
    width: 30px;
    height: 5px;
    font-size: 20px;
    animation-name: sweep;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
} 

@keyframes sweep {
  from {
     motion-offset: 0%;
     offset-distance: 0%;
  }
  to {
     motion-offset: 100%;
     offset-distance: 100%;
  }
}

#first { animation-delay: -9s; color: red; }
#second { animation-delay: -7s; color: gray; }
#third { animation-delay: -5s; color: green; }
#fourth { animation-delay: -3s; color: blue; }
#fifth { animation-delay: -1s; color: purple; }