css3 加载动画

<div class="all">
      <div class="div-1"></div>
      <div class="div-2"></div>
      <div class="div-3"></div>
      <div class="div-4"></div>
      <div class="div-5"></div>
      <div class="div-6"></div>
</div>
动画一：
.all {
  display: flex;
  align-items: center;
  div {
    width: 10px;
    height: 10px;
    line-height: 10px;
    border-radius: 50%;
    background-color: green;
    margin-right: 10px;
    animation: myfirst 1s infinite linear;
  }
  .div-1 {
    animation-delay: 0.1s;
  }
  .div-2 {
    animation-delay: 0.2s;
  }
  .div-3 {
    animation-delay: 0.4s;
  }
  .div-4 {
    animation-delay: 0.6s;
  }
  .div-5 {
    animation-delay: 0.8s;
  }
  .div-6 {
    animation-delay: 1s;
  }
  @keyframes myfirst {
    0%,
    40%,
    100% {
      transform: scale(1.3);
      opacity: 0.5;
    }
    80% {
      transform: scale(1);
      opacity: 1;
    }
  }
}

动画二：

.all {
  position: absolute;
  top: 200px;
  left: 0;
  div {
    transform: translate(-200px, 0);
    position: absolute;
    top: 0;
    width: 200px;
    height: 50px;
    border-radius: 10px;
    background: green;
    animation: myfirst 15s infinite linear;
  }

  .div-1 {
    animation-delay: 0s;
  }
  .div-2 {
    animation-delay: 3s;
  }
  .div-3 {
    animation-delay: 6s;
  }
  .div-4 {
    animation-delay: 9s;
  }
  .div-5 {
    animation-delay: 12s;
  }
  .div-6 {
    animation-delay: 15s;
  }

  @keyframes myfirst {
    0% {
      transform: translate(-200px, 0);
    }

    20% {
      transform: translate(0px, 0);
    }

    50% {
      transform: translate(0px, -100px);
    }

    80% {
      transform: translate(0px, -200px);
    }

    100% {
      opacity: 0;
      transform: translate(0px, -300px);
    }
  }
}