css3实现小球无限循环跳动

一共有四个小球，可以当做loading特效。

<div class="loader">
    <div class="loader-ball">
      <div class="ball ball-first" id="ball-1"></div>
    </div>
    <div class="loader-ball">
      <div class="ball ball-second" id="ball-2"></div>
    </div>
    <div class="loader-ball">
      <div class="ball ball-first" id="ball-3"></div>
    </div>
    <div class="loader-ball">
      <div class="ball ball-second" id="ball-4"></div>
    </div>
  </div>

定义大小和颜色

.ball {
  position: relative;
  top: 0%;
  border-radius: 50%;
  width: 15vmin;
  height: auto;
  margin: auto;
  padding-top: 15vmin;
  max-width: 140px;
  background: #e255228a;
  border: none;
  background: radial-gradient(circle at 40% 0%, #ff870b, #ce3232);
  box-shadow: 0 0 10px 2px #e25522, 0px 0px 10px 0px #6b1a08d1, 0px 0px 14px 2px #610000a3;
  animation-iteration-count: infinite;
}

然后在写跳动动画

#ball-1 {
  animation-name: down_up_down2;
  animation-timing-function: cubic-bezier(0.39, 0.58, 0.57, 1);
  animation-duration: 2200ms;
}


@keyframes down_up_down2 {
  0% {
    top: 0%;
    box-shadow: 0 0 10px 2px #e25522;
  }
  25% {
    top: 175%;
    box-shadow: 0 0 10px 2px #e25522, 0px -20px 10px 0px #6b1a08d1, 0px -40px 14px 2px #610000a3, 0px -60px 14px 2px #6100008a;
    
  }
  50% {
    top: -100%;
    box-shadow: 0 0 10px 2px #ff07b1, 0px 20px 10px 0px #6c0040d1, 0px 40px 14px 2px #420828d1; 
  }
  75% {
    top: 150%;
    box-shadow: 0 0 10px 2px #e25522, 0px -20px 10px 0px #6b1a08d1, 0px -40px 14px 2px #610000a3;
  }
}


@keyframes up_down_up2 {
  0% {
    top: 0%;
    box-shadow: 0 0 10px 2px #7811a7;
  }
  25% {
    top: -150%;
    box-shadow: 0 0 10px 2px #7811a7, 0px 20px 10px 0px #420f63d1, 0px 40px 14px 2px #2e0440d1;
  }
  50% {
    top: 100%;
    box-shadow: 0 0 10px 2px #ff07b1, 0px -20px 10px 0px #6c0040d1, 0px -40px 14px 2px #420828d1;
  }
  75% {
    top: -175%;
    box-shadow: 0 0 10px 2px #7811a7, 0px 20px 10px 0px #420f63d1, 0px 40px 14px 2px #2e0440d1, 0px 60px 14px 2px #2e0440d1;
  }
}