JSFiddle - React, Tailwind, and code Playground

HTML

<div class="strips">
    <div class="strip"></div>
    <div class="strip"></div>
    <div class="strip"></div>
    <div class="strip"></div>
    <div class="strip"></div>
</div>

CSS

.strips {
    width:100%;
    -webkit-animation-name: slide;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
}

.strip {
    height: 5px;
    width:20%;
    float: left;
}
.strip:nth-child(1) {background: red;}
.strip:nth-child(2) {background: purple;}
.strip:nth-child(3) {background: grey;}
.strip:nth-child(4) {background: green;}
.strip:nth-child(5) {background: blue;}

@-webkit-keyframes slide {
    0%{
        -webkit-transform:translateX(-100%);
    }
    100%{
        -webkit-transform:translateX(0);
    }
}