phaseballs

phaseballs.css

body {
  margin: 0;
  padding: 0;
  background: #191f27;
}

.container {
  width: 200px;
  height: 100px;
  padding-top: 100px;
  margin: 0 auto;
}

.ball {
  width: 10px;
  height: 10px;
  margin: 10px auto;
  border-radius: 50px;
  display:inline-block;
}
    .ball:nth-child(1) {
      background: #ff005d;
      -webkit-animation: up 1s infinite ease-in-out;

    }

    .ball:nth-child(2) {
      background: #35ff99;
      -webkit-animation: down 1.05s infinite ease-in-out;
    }

    .ball:nth-child(3) {
      background: #008597;
      -webkit-animation: up 1.1s infinite ease-in-out;
    }

    .ball:nth-child(4) {
      background: #ffcc00;
      -webkit-animation: down 1.15s infinite ease-in-out;
     }

    .ball:nth-child(5) {
      background: #2d3443;  
      -webkit-animation: up 1.2s infinite ease-in-out;
    }

    .ball:nth-child(6) {
      background: #ff7c35;  
      -webkit-animation: down 1.25s infinite ease-in-out;
     }

    .ball:nth-child(7) {
      background: #4d407c;  
      -webkit-animation: up 1.3s infinite ease-in-out;
    }


@-webkit-keyframes down {
  0%   { -webkit-transform: translate(0px,-15px);   }
  50%  { -webkit-transform: translate(0px,15px);    }
  100% { -webkit-transform: translate(0px,-15px);   }
}

@-webkit-keyframes up {
  0%   { -webkit-transform: translate(0px,15px);    }
  50%  { -webkit-transform: translate(0px,-15px);   }
  100% { -webkit-transform: translate(0px,15px);    }
}

@-moz-keyframes down {
  0%   { -moz-transform: translate(0px,-15px);   }
  50%  { -moz-transform: translate(0px,15px);    }
  100% { -moz-transform: translate(0px,-15px);   }
}

@-moz-keyframes up {
  0%   { -moz-transform: translate(0px,15px);    }
  50%  { -moz-transform: translate(0px,-15px);   }
  100% { -moz-transform: translate(0px,15px);    }
}

@keyframes down {
  0%   { transform: translate(0px,-15px);  }
  50%  { transform: translate(0px,15px);   }
  100% { transform: translate(0px,-15px);  }
}

@keyframes up {
  0%   { transform: translate(15px);   }
  50%  { transform: translate(-15px);  }
  100% { transform: translate(15px);   }
}

phaseballss.html

<!-- forked from  http://codepen.io/anon/pen/zJalr -->
<div class="container">
  <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>