Edit in JSFiddle

var html = "";
var off = 0;
  var s = document.createElement('style');
  document.head.appendChild(s);
  maStyle = s.sheet;

for(var x=0;x<300;x++){
if(off==0){
    html+='<div class="gr ba" id="a'+x+'"></div>';
  maStyle.insertRule('#a'+x+'{  animation-delay:-'+(x/19)+'s;  }', maStyle.cssRules.length)
    off=5;
  }else if(off==5){
    html+='<div class="red ba" id="a'+(x)+'"></div>';
  maStyle.insertRule('#a'+x+'{  animation-delay:-'+((x/19)+off)+'s;  }', maStyle.cssRules.length)
    off=10;
  }else if(off==10){
    html+='<div class="yel ba" id="a'+(x)+'"></div>';
  maStyle.insertRule('#a'+x+'{  animation-delay:-'+((x/19)+off)+'s;  }', maStyle.cssRules.length)
    off=15;
  }else if(off==15){
    html+='<div class="bl ba" id="a'+(x)+'"></div>';
  maStyle.insertRule('#a'+x+'{  animation-delay:-'+((x/19)+off)+'s;  }', maStyle.cssRules.length)
    off=0;
  }
}
document.body.innerHTML = html;

body{width:100%;height:100%;text-align: center;background:black;overflow:hidden}
.gr{
background-image: linear-gradient(to right, transparent 30px,transparent 1px, green 1px)
  }
.red{
background-image: linear-gradient(to right, transparent 30px,transparent 1px, red 1px)
 }
.yel{
background-image: linear-gradient(to right, transparent 30px,transparent 1px, yellow 1px)
 }
.bl{
background-image: linear-gradient(to right, transparent 30px,transparent 1px, blue 1px)
 }
.ba{
  width:100VW;
  height:1px;
  animation: leftRight 24s infinite alternate;

  margin-top:5px;
  }
@keyframes leftRight{
0%{ margin-left:-250px;    background-size: 55px 10px;transform: rotateZ(0deg) rotateY(180deg);}
10%{  background-size: 60px 10px }
20%{   background-size: 55px 10px }
30%{  background-size: 70px 10px}
40%{  background-size: 55px 10px}
50%{margin-left:0px;     background-size: 80px 1px;transform: rotateZ(180deg) rotateY(0deg); }
60%{  background-size: 55px 1px}
70%{   background-size: 90px 1px }
80%{   background-size: 55px 1px}
90%{  background-size: 100px 1px}
100%{      margin-left:-250px;background-size: 55px 1px;transform: rotateZ(0deg) rotateY(180deg);}
}