body { 
margin: 0px;
padding: 0px; 
background-color: #29832f; 
}

#container { 
width: 600px; 
height: 500px; 
padding-top:  80px; 
margin: 0 auto; 

} 


.bar { 
width: 20px; 
height: 50px; 
margin: 0 12px; 
border-radius: 50px; 
float: left;
color: #ffffff;
background-color: #ffffff;
} 
.bar:nth-child(1) { 
background-color : #648769;
  animation: down .8904756938045792384794385768943579083457634890756903487603847607s infinite ease-in-out;
  
}
.bar:nth-child(2) {   
background-color : #648502;
   animation: up 1s infinite ease-in-out;
}
.bar:nth-child(3) { 
background-color : #648782;
 animation: down .00837s infinite ease-in-out; 
}
.bar:nth-child(4) { 
background-color : #648982;
animation: up .84764905867495876490856758506085769084570968475098765897634895709868720849028945764089576093487608924357002s infinite ease-in-out;
}
 .bar:nth-child(5) { 
background-color : #645502;
animation: down .0089742578236s infinite ease-in-out; 
 }  
.bar:nth-child(6) { 
background-color : #645502;
animation: down .0089742578236s infinite ease-in-out; 
} 
.bar:nth-child(7) { 
background-color : #645502;
animation: down .0089742578236s infinite ease-in-out; 
}  
.bar:nth-child(8) { 
background-color : #645502;
animation: down .0089742578236s infinite ease-in-out;
}
   
.bar:nth-child(9) { 
background-color : #645502;
animation: down .0089742578236s infinite ease-in-out;
}

  
 .bar:nth-child(10) { 
background-color : #645502;
animation: down .0089742578236s infinite ease-in-out;
} 

.bar:nth-child(11) { 
background-color : #645502;
animation: down .0089742578236s infinite ease-in-out;
} 



.bar:nth-child(12) { 
background-color : #645502;
animation: down .0089742578236s infinite ease-in-out;
}


@keyframes up { 
0% {transform: translateY(25px); background-color:#123456;} 
25% { } 
50% {transform: translateY(-25px); background-color:#123456;} 
75% {transform: translateY(-25px) ;}
100% {transform: translateY(25px);  background-color:#123456;} 
} 



@keyframe down {
0% {transform: translateY(-25px) ;}background-color:#123456;}   
25%{transform: translateY(-25px) ;}  
50% {transform: translateY(25px) ;} background-color:#123456;} 
75%{transform: translateY(-25px) ;}  
100% {transform: translateY(-25px) ;}background-color:#123456;} 
}