.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  background: #27ae60;
  color: #fff;
  font-family: 'Open Sans', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ball {
  position: absolute;
  top: 195px;
  left: 195px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
}

.ball-1 {
  -webkit-animation: ball-1 6s linear infinite;
          animation: ball-1 6s linear infinite;
}

.ball-2 {
  -webkit-animation: ball-2 6s linear infinite;
          animation: ball-2 6s linear infinite;
}

.ball-3 {
  -webkit-animation: ball-3 6s linear infinite;
          animation: ball-3 6s linear infinite;
}

.ball-4 {
  -webkit-animation: ball-4 6s linear infinite;
          animation: ball-4 6s linear infinite;
}

.ball-5 {
  -webkit-animation: ball-5 6s linear infinite;
          animation: ball-5 6s linear infinite;
}

.ball-6 {
  -webkit-animation: ball-6 6s linear infinite;
          animation: ball-6 6s linear infinite;
}

.ball-7 {
  -webkit-animation: ball-7 6s linear infinite;
          animation: ball-7 6s linear infinite;
}

.ball-8 {
  -webkit-animation: ball-8 6s linear infinite;
          animation: ball-8 6s linear infinite;
}

.ball-9 {
  -webkit-animation: ball-9 3.5s linear infinite;
          animation: ball-9 3.5s linear infinite;
}

.ball-10 {
  -webkit-animation: ball-10 3.5s linear infinite;
          animation: ball-10 3.5s linear infinite;
}

.ball-11 {
  -webkit-animation: ball-11 3.5s linear infinite;
          animation: ball-11 3.5s linear infinite;
}

.ball-12 {
  -webkit-animation: ball-12 3.5s linear infinite;
          animation: ball-12 3.5s linear infinite;
}

.ball-13 {
  -webkit-animation: ball-13 3.5s linear infinite;
          animation: ball-13 3.5s linear infinite;
}

.ball-14 {
  -webkit-animation: ball-14 3.5s linear infinite;
          animation: ball-14 3.5s linear infinite;
}

.ball-15 {
  -webkit-animation: ball-15 3.5s linear infinite;
          animation: ball-15 3.5s linear infinite;
}

.ball-16 {
  -webkit-animation: ball-16 3.5s linear infinite;
          animation: ball-16 3.5s linear infinite;
}

@-webkit-keyframes ball-1 {
  0%, 100% {
    -webkit-transform: translate(-195px, -195px);
            transform: translate(-195px, -195px);
  }
  50% {
    -webkit-transform: translate(0, 195px);
            transform: translate(0, 195px);
  }
}

@keyframes ball-1 {
  0%, 100% {
    -webkit-transform: translate(-195px, -195px);
            transform: translate(-195px, -195px);
  }
  50% {
    -webkit-transform: translate(0, 195px);
            transform: translate(0, 195px);
  }
}
@-webkit-keyframes ball-2 {
  0%, 100% {
    -webkit-transform: translate(195px, -195px);
            transform: translate(195px, -195px);
  }
  50% {
    -webkit-transform: translate(0, 195px);
            transform: translate(0, 195px);
  }
}
@keyframes ball-2 {
  0%, 100% {
    -webkit-transform: translate(195px, -195px);
            transform: translate(195px, -195px);
  }
  50% {
    -webkit-transform: translate(0, 195px);
            transform: translate(0, 195px);
  }
}
@-webkit-keyframes ball-3 {
  0%, 100% {
    -webkit-transform: translate(195px, 195px);
            transform: translate(195px, 195px);
  }
  50% {
    -webkit-transform: translate(0, -195px);
            transform: translate(0, -195px);
  }
}
@keyframes ball-3 {
  0%, 100% {
    -webkit-transform: translate(195px, 195px);
            transform: translate(195px, 195px);
  }
  50% {
    -webkit-transform: translate(0, -195px);
            transform: translate(0, -195px);
  }
}
@-webkit-keyframes ball-4 {
  0%, 100% {
    -webkit-transform: translate(-195px, 195px);
            transform: translate(-195px, 195px);
  }
  50% {
    -webkit-transform: translate(0, -195px);
            transform: translate(0, -195px);
  }
}
@keyframes ball-4 {
  0%, 100% {
    -webkit-transform: translate(-195px, 195px);
            transform: translate(-195px, 195px);
  }
  50% {
    -webkit-transform: translate(0, -195px);
            transform: translate(0, -195px);
  }
}
@-webkit-keyframes ball-5 {
  0%, 100% {
    -webkit-transform: translate(-195px, -195px);
            transform: translate(-195px, -195px);
  }
  50% {
    -webkit-transform: translate(195px, 0);
            transform: translate(195px, 0);
  }
}
@keyframes ball-5 {
  0%, 100% {
    -webkit-transform: translate(-195px, -195px);
            transform: translate(-195px, -195px);
  }
  50% {
    -webkit-transform: translate(195px, 0);
            transform: translate(195px, 0);
  }
}
@-webkit-keyframes ball-6 {
  0%, 100% {
    -webkit-transform: translate(195px, -195px);
            transform: translate(195px, -195px);
  }
  50% {
    -webkit-transform: translate(-195px, 0);
            transform: translate(-195px, 0);
  }
}
@keyframes ball-6 {
  0%, 100% {
    -webkit-transform: translate(195px, -195px);
            transform: translate(195px, -195px);
  }
  50% {
    -webkit-transform: translate(-195px, 0);
            transform: translate(-195px, 0);
  }
}
@-webkit-keyframes ball-7 {
  0%, 100% {
    -webkit-transform: translate(195px, 195px);
            transform: translate(195px, 195px);
  }
  50% {
    -webkit-transform: translate(-195px, 0);
            transform: translate(-195px, 0);
  }
}
@keyframes ball-7 {
  0%, 100% {
    -webkit-transform: translate(195px, 195px);
            transform: translate(195px, 195px);
  }
  50% {
    -webkit-transform: translate(-195px, 0);
            transform: translate(-195px, 0);
  }
}
@-webkit-keyframes ball-8 {
  0%, 100% {
    -webkit-transform: translate(-195px, 195px);
            transform: translate(-195px, 195px);
  }
  50% {
    -webkit-transform: translate(195px, 0);
            transform: translate(195px, 0);
  }
}
@keyframes ball-8 {
  0%, 100% {
    -webkit-transform: translate(-195px, 195px);
            transform: translate(-195px, 195px);
  }
  50% {
    -webkit-transform: translate(195px, 0);
            transform: translate(195px, 0);
  }
}
@-webkit-keyframes ball-9 {
  0%, 100% {
    -webkit-transform: translate(0, -195px);
            transform: translate(0, -195px);
  }
  50% {
    -webkit-transform: translate(195px, 0);
            transform: translate(195px, 0);
  }
}
@keyframes ball-9 {
  0%, 100% {
    -webkit-transform: translate(0, -195px);
            transform: translate(0, -195px);
  }
  50% {
    -webkit-transform: translate(195px, 0);
            transform: translate(195px, 0);
  }
}
@-webkit-keyframes ball-10 {
  0%, 100% {
    -webkit-transform: translate(0, 195px);
            transform: translate(0, 195px);
  }
  50% {
    -webkit-transform: translate(195px, 0);
            transform: translate(195px, 0);
  }
}
@keyframes ball-10 {
  0%, 100% {
    -webkit-transform: translate(0, 195px);
            transform: translate(0, 195px);
  }
  50% {
    -webkit-transform: translate(195px, 0);
            transform: translate(195px, 0);
  }
}
@-webkit-keyframes ball-11 {
  0%, 100% {
    -webkit-transform: translate(0, -195px);
            transform: translate(0, -195px);
  }
  50% {
    -webkit-transform: translate(-195px, 0);
            transform: translate(-195px, 0);
  }
}
@keyframes ball-11 {
  0%, 100% {
    -webkit-transform: translate(0, -195px);
            transform: translate(0, -195px);
  }
  50% {
    -webkit-transform: translate(-195px, 0);
            transform: translate(-195px, 0);
  }
}
@-webkit-keyframes ball-12 {
  0%, 100% {
    -webkit-transform: translate(0, 195px);
            transform: translate(0, 195px);
  }
  50% {
    -webkit-transform: translate(-195px, 0);
            transform: translate(-195px, 0);
  }
}
@keyframes ball-12 {
  0%, 100% {
    -webkit-transform: translate(0, 195px);
            transform: translate(0, 195px);
  }
  50% {
    -webkit-transform: translate(-195px, 0);
            transform: translate(-195px, 0);
  }
}
@-webkit-keyframes ball-13 {
  0%, 100% {
    -webkit-transform: translate(195px, 0);
            transform: translate(195px, 0);
  }
  50% {
    -webkit-transform: translate(0, 195px);
            transform: translate(0, 195px);
  }
}
@keyframes ball-13 {
  0%, 100% {
    -webkit-transform: translate(195px, 0);
            transform: translate(195px, 0);
  }
  50% {
    -webkit-transform: translate(0, 195px);
            transform: translate(0, 195px);
  }
}
@-webkit-keyframes ball-14 {
  0%, 100% {
    -webkit-transform: translate(-195px, 0);
            transform: translate(-195px, 0);
  }
  50% {
    -webkit-transform: translate(0, 195px);
            transform: translate(0, 195px);
  }
}
@keyframes ball-14 {
  0%, 100% {
    -webkit-transform: translate(-195px, 0);
            transform: translate(-195px, 0);
  }
  50% {
    -webkit-transform: translate(0, 195px);
            transform: translate(0, 195px);
  }
}
@-webkit-keyframes ball-15 {
  0%, 100% {
    -webkit-transform: translate(195px, 0);
            transform: translate(195px, 0);
  }
  50% {
    -webkit-transform: translate(0, -195px);
            transform: translate(0, -195px);
  }
}
@keyframes ball-15 {
  0%, 100% {
    -webkit-transform: translate(195px, 0);
            transform: translate(195px, 0);
  }
  50% {
    -webkit-transform: translate(0, -195px);
            transform: translate(0, -195px);
  }
}
@-webkit-keyframes ball-16 {
  0%, 100% {
    -webkit-transform: translate(-195px, 0);
            transform: translate(-195px, 0);
  }
  50% {
    -webkit-transform: translate(0, -195px);
            transform: translate(0, -195px);
  }
}
@keyframes ball-16 {
  0%, 100% {
    -webkit-transform: translate(-195px, 0);
            transform: translate(-195px, 0);
  }
  50% {
    -webkit-transform: translate(0, -195px);
            transform: translate(0, -195px);
  }
}