实现多个图片无限交替加载的loading效果

前言：由于业务需要，UI提供了一张gif动画的几张底图，因为加载gif花销很大，所以要前端用几张底图实现gif的效果。

首先想到的就是animation infinite delay backwards...之类的一些属性。但是我们都知道animation-delay只在动画开始前起作用，第一次动画结束后再次展示动画时则没有这个延迟。

那么animation就不能实现这种效果了吗？答案当然是No

“Say you want an animation to run for 1 second, but when delay for 4 seconds before running again. Seems like that would be easy. Turns out it's not-so-straightforward, but doable. You need to fake it.” 请自行翻译脑补ahh～

下面先把UI想要的效果贴出来，毕竟无图言🦅～

(漏图了，不知道咋修改gif，不要在意，请轻喷～)

下面开始直接上代码

// 组成gif的几张底图组成一张雪碧图

// html代码

    <div class="outer-circle">
      <div class="inner-circle">
        <div class="flower"></div>
        <div class="flower"></div>
        <div class="flower"></div>
        <div class="flower"></div>
        <div class="flower"></div>
        <div class="flower"></div>
        <div class="flower"></div>
      </div>
    </div>
  </div>

// css代码

    .container {
      border-radius: 27px;
      width: 180px;
      height: 180px;
      margin: 100px auto;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #000;
      opacity: .5;
    }

    .outer-circle {
      width: 123px;
      height: 123px;
      border-radius: 50%;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .inner-circle {
      position: relative;
      width: 115px;
      height: 115px;
      border-radius: 50%;
      background: #000;
    }

    .flower {
      position: absolute;
      width: 81px;
      height: 63px;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      z-index: 1;
      background: url('./assets/images/flower.png') no-repeat;
    }

    .flower:nth-child(1) {
      background-position: 0 0;
    }

    .flower:nth-child(2) {
      background-position: -108px 0;
      opacity: 0;
      animation: circle2 3s infinite backwards;
    }


    .flower:nth-child(3) {
      background-position: -216px 0;
      opacity: 0;
      animation: circle3 3s infinite backwards;
    }

    .flower:nth-child(4) {
      background-position: -324px 0;
      opacity: 0;
      animation: circle4 3s infinite backwards;
    }

    .flower:nth-child(5) {
      background-position: -432px 0;
      opacity: 0;
      animation: circle5 3s infinite backwards;
    }

    .flower:nth-child(6) {
      background-position: -540px 0;
      opacity: 0;
      animation: circle6 3s infinite backwards;
    }

    .flower:nth-child(7) {
      background-position: -648px 0;
      opacity: 0;
      animation: circle7 3s infinite backwards;
    }

    @keyframes circle2 {

      0%,
      15% {
        opacity: 0;
      }

      16%,
      100% {
        opacity: 1;
      }
    }

    @keyframes circle3 {

      0%,
      30% {
        opacity: 0;
      }

      31%,
      100% {
        opacity: 1;
      }
    }

    @keyframes circle4 {

      0%,
      45% {
        opacity: 0;
      }

      46%,
      100% {
        opacity: 1;
      }
    }

    @keyframes circle5 {

      0%,
      60% {
        opacity: 0;
      }

      61%,
      100% {
        opacity: 1;
      }
    }

    @keyframes circle6 {

      0%,
      75% {
        opacity: 0;
      }

      76%,
      100% {
        opacity: 1;
      }
    }

    @keyframes circle7 {

      0%,
      90% {
        opacity: 0;
      }

      91%,
      100% {
        opacity: 1;
      }
    }
  </style>

主要思想就是以下几步

// 动画执行时间假如是1s，延迟4s执行，总共是5s的时间。我们可以在20%的时候把要做的事情在这里做掉即可，比如：

@keyframes move {
    0% {
        opacity: 0;
    }
    
    20%,
    100% {
        opacity: 1;
    }
}

// 然后把每个底图的动画调整下具体的百分比即可