.ball {
  float: left;
  width: 10px;
  height: 10px;
  margin: auto 10px;
  border-radius: 50px;
}

.ball:nth-child(1) {
  background: #1E30F3;
  -webkit-animation: right 1s infinite ease-in-out;

}

.ball:nth-child(2) {
  background: #FEC031;
  -webkit-animation: left 1.1s infinite ease-in-out;
}

.ball:nth-child(3) {
  background: #1E30F3;
  -webkit-animation: right 1.05s infinite ease-in-out;
}

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

.ball:nth-child(5) {
  background: #1E30F3;
  -webkit-animation: right 1.1s infinite ease-in-out;
}

.ball:nth-child(6) {
  background: #FEC031;
  -webkit-animation: left 1.05s infinite ease-in-out;
}

.ball:nth-child(7) {
  background: #1E30F3;
  -webkit-animation: right 1s infinite ease-in-out;
}


@-webkit-keyframes right {
  0% {
    -webkit-transform: translateY(-15px);
  }

  50% {
    -webkit-transform: translateY(15px);
  }

  100% {
    -webkit-transform: translateY(-15px);
  }
}

@-webkit-keyframes left {
  0% {
    -webkit-transform: translateY(15px);
  }

  50% {
    -webkit-transform: translateY(-15px);
  }

  100% {
    -webkit-transform: translateY(15px);
  }
}

@-moz-keyframes right {
  0% {
    -moz-transform: translate(-15px);
  }

  50% {
    -moz-transform: translate(15px);
  }

  100% {
    -moz-transform: translate(-15px);
  }
}

@-moz-keyframes left {
  0% {
    -moz-transform: translate(15px);
  }

  50% {
    -moz-transform: translate(-15px);
  }

  100% {
    -moz-transform: translate(15px);
  }
}

@keyframes right {
  0% {
    transform: translate(-15px);
  }

  50% {
    transform: translate(15px);
  }

  100% {
    transform: translate(-15px);
  }
}

@keyframes left {
  0% {
    transform: translate(15px);
  }

  50% {
    transform: translate(-15px);
  }

  100% {
    transform: translate(15px);
  }
}