html,
body {
  height: 100%;
}

body {
  background: #fff;
  background: -webkit-radial-gradient(#fff, #ccc);
  background: radial-gradient(#fff, #ccc);
}

.wrap {
  bottom: 100px;
  margin-left: -50px;
  position: absolute;
  width: 100px;
}

.red   { left: 25%; }
.green { left: 50%; }
.blue  { left: 75%; }

.ball,
.shadow {
  border-radius: 100%;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}

.ball {
  -webkit-animation: ball 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
  animation: ball 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
  height: 50px;
  width: 50px;
}

.red .ball   { background: -webkit-gradient(linear, left top, left bottom, from(#e55), to(#b00)); background: -webkit-linear-gradient(#e55, #b00); background: linear-gradient(#e55, #b00); }
.green .ball { background: -webkit-gradient(linear, left top, left bottom, from(#5d5), to(#0a0)); background: -webkit-linear-gradient(#5d5, #0a0); background: linear-gradient(#5d5, #0a0); }
.blue .ball  { background: -webkit-gradient(linear, left top, left bottom, from(#59e), to(#04b)); background: -webkit-linear-gradient(#59e, #04b); background: linear-gradient(#59e, #04b); }

.shadow {
  -webkit-animation: shadow 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
  animation: shadow 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
  background: #000;
  bottom: -90px;
  height: 25px;
  width: 75px;
}

.red .ball, 
.red .shadow   { -webkit-animation-delay: -200ms; animation-delay: -200ms; }
.green .ball,
.green .shadow { -webkit-animation-delay: -100ms; animation-delay: -100ms; }
.blue .ball ,
.blue .shadow  { -webkit-animation-delay: 0; animation-delay: 0; }

@-webkit-keyframes ball {
  0% {
    -webkit-transform: translateY( 0 );
    transform: translateY( 0 );
  }
  100% {
    -webkit-transform: translateY( -150px );
    transform: translateY( -150px );
  }
}

@keyframes ball {
  0% {
    -webkit-transform: translateY( 0 );
    transform: translateY( 0 );
  }
  100% {
    -webkit-transform: translateY( -150px );
    transform: translateY( -150px );
  }
}

@-webkit-keyframes shadow {
  0% {
    opacity: 0.2;
    -webkit-transform: scale( 0.75 );
    transform: scale( 0.75 );
  }
  100% {
    opacity: 0.05;
    -webkit-transform: scale( 1 );
    transform: scale( 1 );
  }
}

@keyframes shadow {
  0% {
    opacity: 0.2;
    -webkit-transform: scale( 0.75 );
    transform: scale( 0.75 );
  }
  100% {
    opacity: 0.05;
    -webkit-transform: scale( 1 );
    transform: scale( 1 );
  }
}