<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>

body {background:#e7edff;
  perspective: 300px;
  transform-style: preserve-3d;
}


.ball {
  width:20px;
  height:20px;
  background: #627384;
  border-radius: 50%;
  position:absolute;
  top:50%;
  left:50%;
  transition: all 1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

.ball:nth-of-type(2n+2) {
  background:#ca4c57;
}
.ball:nth-of-type(3n+3) {
  background:#dc713c;
}


setInterval(moveBall, 1000);

function moveBall() {
  $('.ball').each(function() {
    $(this).css('transform', 'translate3d('+randomInteger(-500,500)+'px,'+randomInteger(-500,500)+'px,'+randomInteger(-400,400)+'px)');
  });
 }

//easier random number fun!
function randomInteger(min, max) {
	if(max===undefined) {
		max = min; 
		min = 0; 
	}
	return Math.floor(Math.random() * (max+1-min)) +min;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js