body  {
    margin:  0;
	padding: 0;
	background-color:  #87CEEB
	
   }
   #container  {
	   width: 500px;
	   height: 500px;
	   padding-top: 80px;
	   margin: 0 auto;
   }
   
.oreo  {
	 width: 20px;
	 height: 50px;
	 margin: 0 12p;
	 border-radius: 50px;
	 float: left ;
 }
.oreo:nth-child(1) {
	background-color: #333333;
	animation: up 1s infinite ease-in-out;
	}
	.oreo:nth-child(2) {
	background-color: #333333;
	animation: down 1s infinite ease-in-out;
	}
	.oreo:nth-child(3) {
	background-color: #333333;
	animation: up 1s infinite ease-in-out;
	}
	.oreo:nth-child(4) {
	background-color: #333333;
	animation: down 1s infinite ease-in-out;
	}
	.oreo:nth-child(5) {
	background-color: #333333;
	animation: up 1s infinite ease-in-out;
	}

	.oreo:nth-child(6) {
	background-color: #333333;
	animation: down 1s infinite ease-in-out;
	}
	.oreo:nth-child(7) {
	background-color: #333333;
	animation: up 1s infinite ease-in-out;
	}
	.oreo:nth-child(8) {
	background-color: #333333;
	animation: down 1s infinite ease-in-out;
	}
	.oreo:nth-child(9) {
	background-color: #333333;
	animation: up 1s infinite ease-in-out;
	}

	.oreo:nth-child(10) {
	background-color: #333333;
	animation: down 1s infinite ease-in-out;
	}
	.oreo:nth-child(11) {
	background-color: #333333;
	animation: up 1s infinite ease-in-out;
	}
	.oreo:nth-child(12) {
	background-color: #333333;
	animation: down 1s infinite ease-in-out;
	}
	
@keyframes up {
  0%  {transform: translateY(-25px);  background-color:  #87CEEB; }
  50% {transform: translate(25px);   background-color:  #5F9EA0; }
  100% {transform: translateY(-25px); background-color:  #FF7F50; }
}
@keyframes down {
  0%  {transform: translateY(25px);  background-color:   #9932CC; }
  50% {transform: translateY(-25px);  background-color:  #8FBC8F; }
  100% {transform: translateY(25px);  background-color:  #20B2AA; }
}