body  {
  margin: 0px;
  padding: 0px;
  background-image: url(p5s.gif);
   background-size: cover;
    background-repeat: no-repeat;
  }
  
#container {
  width: 600px;
  height: 500px;
  padding-top: 400px;
  margin: 0 auto;
  }
  
.line { 
  width: 20px;
  height: 50px;
  margin: 0 12px;
  border-radius: 50px;
  float: left;
  }
  
.line:nth-child(1) {
  background-color: #ff0000;
  animation: down 1s infinite ease-in-out ;
  }
  
.line:nth-child(2) {
  background-color: #daa520;
  animation: up 1.789s infinite ease-in-out  ;
  }
  
.line:nth-child(3) {
  background-color: #008080;
  animation: down 1.456s infinite ease-in-out  ;
  }
  
.line:nth-child(4) {
  background-color: #ffa500;
  animation: up 1.123s infinite ease-in-out ; 
  }
  
.line:nth-child(5) {
  background-color: #339933;
  animation: down 1.789s infinite ease-in-out ; 
  }
  
  .line:nth-child(6) {
  background-color: #e6b800;
  animation: up 1.567s infinite ease-in-out ; 
  }
  
  .line:nth-child(7) {
  background-color: #cccc00;
  animation: down 1.234s infinite ease-in-out ; 
  }
  
  .line:nth-child(8) {
  background-color: #59b300;
  animation: up 2.1s infinite ease-in-out ; 
  }
  
  .line:nth-child(9) {
  background-color: #008080;
  animation: down 1.6s infinite ease-in-out ; 
  }
  
  .line:nth-child(10) {
  background-color: #02ed8f;
  animation: up 1.9s infinite ease-in-out ; 
  }
  
  .line:nth-child(11) {
  background-color: #000000;
  animation: down 1.1s infinite ease-in-out ; 
  }
  
  .line:nth-child(12) {
  background-color: #000000;
  animation: up 2s infinite ease-in-out ; 
  }
  
  .line:nth-child(13) {
  background-color: #ff0000;
  animation: down 1s infinite ease-in-out ;
  }
  
.line:nth-child(14) {
  background-color: #daa520;
  animation: up 1.789s infinite ease-in-out  ;
  }
  
.line:nth-child(15) {
  background-color: #008080;
  animation: down 1.456s infinite ease-in-out  ;
  }
  
.line:nth-child(16) {
  background-color: #ffa500;
  animation: up 1.123s infinite ease-in-out ; 
  }
  
.line:nth-child(17) {
  background-color: #339933;
  animation: down 1.789s infinite ease-in-out ; 
  }
  
  .line:nth-child(18) {
  background-color: #e6b800;
  animation: up 1.567s infinite ease-in-out ; 
  }
  
  .line:nth-child(19) {
  background-color: #cccc00;
  animation: down 1.234s infinite ease-in-out ; 
  }
  
  .line:nth-child(20) {
  background-color: #59b300;
  animation: up 2.1s infinite ease-in-out ; 
  }
  
  .line:nth-child(21) {
  background-color: #008080;
  animation: down 1.6s infinite ease-in-out ; 
  }
  
  .line:nth-child(22) {
  background-color: #02ed8f;
  animation: up 1.9s infinite ease-in-out ; 
  }
  
  .line:nth-child(23) {
  background-color: #000000;
  animation: down 1.1s infinite ease-in-out ; 
  }
  
  .line:nth-child(24) {
  background-color: #000000;
  animation: up 2s infinite ease-in-out ; 
  }
  
  .line:nth-child(25) {
  background-color: #ff0000;
  animation: down 1s infinite ease-in-out ;
  }
  
.line:nth-child(26) {
  background-color: #daa520;
  animation: up 1.789s infinite ease-in-out  ;
  }
  
.line:nth-child(27) {
  background-color: #008080;
  animation: down 1.456s infinite ease-in-out  ;
  }
  
.line:nth-child(28) {
  background-color: #ffa500;
  animation: up 1.123s infinite ease-in-out ; 
  }
  
.line:nth-child(29) {
  background-color: #339933;
  animation: down 1.789s infinite ease-in-out ; 
  }
  
  .line:nth-child(30) {
  background-color: #e6b800;
  animation: up 1.567s infinite ease-in-out ; 
  }
  
  .line:nth-child(31) {
  background-color: #cccc00;
  animation: down 1.234s infinite ease-in-out ; 
  }
  
  .line:nth-child(32) {
  background-color: #59b300;
  animation: up 2.1s infinite ease-in-out ; 
  }
  
  .line:nth-child(33) {
  background-color: #008080;
  animation: down 1.6s infinite ease-in-out ; 
  }
  
  .line:nth-child(34) {
  background-color: #02ed8f;
  animation: up 1.9s infinite ease-in-out ; 
  }
  
  .line:nth-child(35) {
  background-color: #000000;
  animation: down 1.1s infinite ease-in-out ; 
  }
  
  .line:nth-child(36) {
  background-color: #000000;
  animation: up 2s infinite ease-in-out ; 
  }
  
  .line:nth-child(37) {
  background-color: #ff0000;
  animation: down 1s infinite ease-in-out ;
  }
  
.line:nth-child(38) {
  background-color: #daa520;
  animation: up 1.789s infinite ease-in-out  ;
  }
  
.line:nth-child(39) {
  background-color: #008080;
  animation: down 1.456s infinite ease-in-out  ;
  }
  
.line:nth-child(40) {
  background-color: #ffa500;
  animation: up 1.123s infinite ease-in-out ; 
  }
  
.line:nth-child(41) {
  background-color: #339933;
  animation: down 1.789s infinite ease-in-out ; 
  }
  
  .line:nth-child(42) {
  background-color: #e6b800;
  animation: up 1.567s infinite ease-in-out ; 
  }
  
  .line:nth-child(43) {
  background-color: #cccc00;
  animation: down 1.234s infinite ease-in-out ; 
  }
  
  .line:nth-child(44) {
  background-color: #59b300;
  animation: up 2.1s infinite ease-in-out ; 
  }
  
  .line:nth-child(45) {
  background-color: #008080;
  animation: down 1.6s infinite ease-in-out ; 
  }
  
  .line:nth-child(46) {
  background-color: #02ed8f;
  animation: up 1.9s infinite ease-in-out ; 
  }
  
  .line:nth-child(47) {
  background-color: #fd0000;
  animation: down 1.1s infinite ease-in-out ; 
  }
  
  .line:nth-child(48) {
  background-color: #9gf000;
  animation: up 2s infinite ease-in-out ; 
  }
  
@keyframes up {
  0% { transform: translateyY(-75px) ;background-color: ff0000 ;}
  25% { background-color: #02ed8f;}
  50% { transform: translateY(75px) ;background-color: ff0000 ;}
  75% { background-color: #ff0000   ;}
  100% { transform: translateY(-75px) ;background-color: ff0000 ;}
  }	
  
 @keyframes down {
  0% { transform: translateyY(-75px) ;background-color: ff0000 ;}
  25% { background-color: #02ed8f;}
  50% { transform: translateY(75px) ;background-color: ff0000 ;}
  75% { background-color: #ff0000   ;}
  100% { transform: translateY(-75px) ;background-color: ff0000 ;}
  }	