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

.ball-rotate {
  position: relative; }
  .ball-rotate > div {
    background-color: #6B6F82;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    animation-fill-mode: both;
    position: relative; }
    .ball-rotate > div:first-child {
      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: 0px;
      left: -28px; }
    .ball-rotate > div:after {
      top: 0px;
      left: 25px; }