Balls of Blue

by rgthree

CSS

.container {
    position: relative;
    width: 400px;
    height: 160px;
    border-bottom: 1px solid #f00;
    margin: 25px auto;
}
.ball {
  width: 10px;
  height: 10px;
  border-radius: 50%;
    position: absolute;
    left: 0px;
    top: 10px;
    transform: translateY(0px);
    
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-duration: 2s;
	background-color: blue;
	background-image: radial-gradient(circle 15px at 0 0, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,.8)), radial-gradient(circle 50px at 3px 3px, rgba(255,255,255,.7), rgba(0,0,0,0));
	background-repeat: no-repeat, no-repeat;
}

.ball.-a0 {
  top: 0px;
  -webkit-animation-name: bounce0;
}
.ball.-a1 {
  top: 50px;
  -webkit-animation-name: bounce1;
}
.ball.-a2 {
  top: 30px;
  -webkit-animation-name: bounce2;
}
.ball.-a3 {
  top: 60px;
  -webkit-animation-name: bounce3;
}
.ball.-a4 {
  top: 20px;
  -webkit-animation-name: bounce4;
}

@-webkit-keyframes bounce0 {
    from, to  {
        transform: translateY(0px);
        animation-timing-function: ease-in;
    }
    50% {
        transform: translateY(150px);
        animation-timing-function: ease-out;
    }
}
@-webkit-keyframes bounce1 {
    from, to  {
        transform: translateY(0px);
        animation-timing-function: ease-in;
    }
    50% {
        transform: translateY(100px);
        animation-timing-function: ease-out;
    }
}

@-webkit-keyframes bounce2 {
    from, to  {
        transform: translateY(0px);
        animation-timing-function: ease-in;
    }
    50% {
        transform: translateY(120px);
        animation-timing-function: ease-out;
    }
}
@-webkit-keyframes bounce3 {
    from, to  {
        transform: translateY(0px);
        animation-timing-function: ease-in;
    }
    50% {
        transform: translateY(90px);
        animation-timing-function: ease-out;
    }
}
@-webkit-keyframes bounce4 {
    from, to  {
  ...

JavaScript

var container = document.createElement('div');
container.className = 'container';
  document.body.appendChild(container);
var ball = document.createElement('div');
ball.className = 'ball';

function rand(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

Array(50).join(',').split(',').forEach(function(v, i) {
  var el = ball.cloneNode();
  el.className += ' -a' + rand(0,4) + ' -s' + rand(0,4);
    el.style.left = rand(0, 95) + '%';
    el.style.WebkitAnimationDuration = (rand(90, 150) / 100) + 's';
  container.appendChild(el);
});