@-webkit-keyframes rotate {
  0% {
    -webkit-transform : rotate(0deg);
            transform : rotate(0deg);
  }
  50% {
    -webkit-transform : rotate(-180deg);
            transform : rotate(-180deg);
  }
  100% {
    -webkit-transform : rotate(-360deg);
            transform : rotate(-360deg);
  }
}

@keyframes rotate {
  0% {
    -webkit-transform : rotate(0deg);
            transform : rotate(0deg);
  }
  50% {
    -webkit-transform : rotate(-180deg);
            transform : rotate(-180deg);
  }
  100% {
    -webkit-transform : rotate(-360deg);
            transform : rotate(-360deg);
  }
}

.ball-rotate {
  position : relative;
}
.ball-rotate > div {
  background-color : #6B6F82;
  width : 15px;
  height : 15px;
  border-radius : 100%;
  margin : 2px;
  -webkit-animation-fill-mode : both;
          animation-fill-mode : both;
  position : relative;
}
.ball-rotate > div:first-child {
  -webkit-animation : rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite;
          animation : rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite;
}
.ball-rotate > div:before, .ball-rotate > div:after {
  background-color : #6B6F82;
  width : 15px;
  height : 15px;
  border-radius : 100%;
  margin : 2px;
  content : '';
  position : absolute;
  opacity : 0.8;
}
.ball-rotate > div:before {
  top : 0;
  right : -28px;
}
.ball-rotate > div:after {
  top : 0;
  right : 25px;
}