To realize the loading effect of multiple pictures loading endlessly alternately

Foreword: due to business needs, UI provides a GIF animation of several base map, because loading GIF cost is very large, so to the front end with a few base map to achieve the GIF effect.

Animation infinite delay backwards… And so on. But we all know that animation-delay only works before the animation starts, and not when the animation is displayed again after the first animation.

Can’t animation achieve this effect? The answer, of course, is 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.

The following UI want the effect of the post out, after all, no picture words 🦅 ~

(Missing image, do not know how to modify GIF, do not care, please lightly spray ~)

So let’s go straight to the code

// The base images that make up the GIF form a Sprite

/ / HTML code

    <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>
Copy the code

/ / CSS code

    .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>
Copy the code

The main idea is the following steps

// The animation execution time is 1s, and the execution delay is 4s, so the total time is 5s. Opacity: 0; opacity: 0; opacity: 0; opacity: 0; } 20%, 100% { opacity: 1; }} // Then adjust the animation of each base image to the specific percentageCopy the code