body {
  margin: 0px;
  padding: 0px;
  background-color: #29832f;
   }
   
#container {
 width : 500px;
 height: 500px;
 padding-top: 80px;
 margin: 0 auto;
}
 
.bar {
 width:20px;
 height:50px;
 margin: 0px auto;
 border-radius: 50px;
 float:left; 
 }
 
 .bar:nth-child(1) {
 background-color: #00FFFF;
 animation:down 1s infinite ease-in-out;
 }
 
 .bar:nth-child(2) {
 background-color: #00FFFF;
 animation:up 1.1s infinite ease-in-out;
 }
 
 .bar:nth-child(3) {
 background-color:  #9370DB;
 animation:down 1.2s infinite ease-in-out;
 }
 
 .bar:nth-child(4) {
 background-color : #F5FFFA;
 animation:up 1.3s infinite ease-in-out;
 }
 
 .bar:nth-child(5) {
 background-color :#00FFFF;
 animation:down 1.4s infinite ease-in-out;
  }
  
 .bar:nth-child(6) {
 background-color : ##20B2AA;
 animation:down 1.5s infinite ease-in-out;
  }
 .bar:nth-child(7) {
 background-color : #90EE90;
 animation:down 1.6s infinite ease-in-out;
  }
 .bar:nth-child(8) {
 background-color :#87CEFA;
 animation:down 1.7s infinite ease-in-out;
  }
 .bar:nth-child(9) {
 background-color :#87CEFA;
 animation:down 1.8s infinite ease-in-out;
  }
 .bar:nth-child(10) {
 background-color : #66CDAA;
 animation:down 1.9s infinite ease-in-out;
  }
 .bar:nth-child(11) {
 background-color :#00FA9A;
 animation:down 1.10s infinite ease-in-out;
  }
 .bar:nth-child(12) {
 background-color :#48D1CC;
 animation:down 1.11s infinite;
  }
 @keyframes up {
  0%{transform : translateY(-75px); background-color: #00FFFF}
    25%{transform : translateY(-75px);background-color: #00FFFF}
  50%{transform : translateY(75px);background-color: #00FFFF}
 75%{transform : translateY(75px);background-color: #00FFFF}
  100{transform : translateY(-75px);background-color: #00FFFF}
 }
	@keyframes down {
	0%{transform : translateY(-75px);}
	50%{transform : translateY(75px);}
	100{transform : translateY(-75px);}
	}