<div class="stage">
  <div class="move">
  	<div class="dot animated infinite bounce del-1"></div>
  </div>
  <div class="move">
  	<div class="dot animated infinite bounce del-2"></div>
  </div>
  <div class="move">
  	<div class="dot animated infinite bounce del-3"></div>
  </div>
  <div class="move">
  	<div class="dot animated infinite bounce del-4"></div>
  </div>
  <div class="move">
  	<div class="dot animated infinite bounce del-5"></div>
  </div>
  <div class="move">
  	<div class="dot animated infinite bounce del-6"></div>
  </div>
  <div class="move">
  	<div class="dot animated infinite bounce del-7"></div>
  </div>
  <div class="move">
  	<div class="dot animated infinite bounce del-8"></div>
  </div>
  <div class="move">
  	<div class="dot animated infinite bounce del-9"></div>
  </div>
</div>

@intensity: 40;
@intensitypx: 10px;


body {
	background: #000;
}
.stage {
	background: #000;
	padding: 150px;

	filter: contrast(@intensity); /* Someday, sigh ... */ 
	-webkit-filter: contrast(@intensity); /* Prefixed CSS3 contrast filters */
	-moz-filter: contrast(@intensity); 
	-o-filter: contrast(@intensity); 
	-ms-filter: contrast(@intensity); 
	filter: url(#contrast); /* Firefox needs SVG */
	filter: contrast(@intensity);

}
.dot {
  	border-radius: 50%;

  	display: inline-block;
  	position: absolute;
  	left:50px;
  	/* needs to be very contrasty color. Some light gray won't work */
 	background: rgba(200,240,155,1);
	
	filter: blur(@intensitypx); /* Someday, sigh ... */ 
	-webkit-filter: blur(@intensitypx); /* Prefixed CSS3 blur filters */
	-moz-filter: blur(@intensitypx); 
	-o-filter: blur(@intensitypx); 
	-ms-filter: blur(@intensitypx); 


	&.del-1{-webkit-animation-delay: 0s;animation-delay:0s;width:50px;height:50px;}
	&.del-2{-webkit-animation-delay: 0.1s;animation-delay:0.1s;width:75px;height:75px;}
	&.del-3{-webkit-animation-delay: 0.2s;animation-delay:0.2s;width:30px;height:30px;}
	&.del-4{-webkit-animation-delay: 0.3s;animation-delay:0.9s;width:55px;height:55px;}
	&.del-5{-webkit-animation-delay: 0.2s;animation-delay:0.6s;width:40px;height:55px;}
	&.del-6{-webkit-animation-delay: 0.1s;animation-delay:0.8s;width:30px;height:40px;}
	&.del-7{-webkit-animation-delay: 0.3s;animation-delay:0.5s;width:80px;height:80px;}
	&.del-8{-webkit-animation-delay: 0.2s;animation-delay:0.8s;width:90px;height:30px;}
	&.del-9{-webkit-animation-delay: 0.1s;animation-delay:0.2s;width:10px;height:40px;}
}

.move {
  	display: block;

	&:nth-child(1){-webkit-animation-delay: 0s;animation-delay:0s;}
	&:nth-child(2){-webkit-animation-delay: -10s;animation-delay:-10s;}
	&:nth-child(3){-webkit-animation-delay: -20s;animation-delay:-20s;}
	&:nth-child(4){-webkit-animation-delay: -30s;animation-delay:-30s;}
	&:nth-child(5){-webkit-animation-delay: -40s;animation-delay:-40s;}
	&:nth-child(6){-webkit-animation-delay: -50s;animation-delay:-50s;}
	&:nth-child(7){-webkit-animation-delay: -60s;animation-delay:-60s;}
	&:nth-child(8){-webkit-animation-delay: -70s;animation-delay:-70s;}
	&:nth-child(9){-webkit-animation-delay: -80s;animation-delay:-80s;}

}

@keyframes bounce {

  0% {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
    
  }

  47% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
  }

  100% {
    transform: translate3d(0,-4px,0);
  }

}
.bounce {
  animation-name: bounce;
  animation-duration: 0.5s;
  transform-origin: center bottom;
}

@keyframes move {
  0%{
	transform: translate3d(10%,0,0);
  }
  50%{
  	transform: translate3d(90%,0,0);
  }
  100% {
  	transform: translate3d(10%,0,0);
  }
}
.move {
  animation-name: move;
  animation-duration: 35s;
  animation-iteration-count: infinite;
}