CSS动画，部分动画播放完毕，按顺序重复播放

Question

作为 CSS 动画的新手，我正在尝试制作一些旋转器，
不幸的是，我无法重复一个动画循环，我正在寻求帮助！

代码如下：

.rotate {
      transform: rotate(-45deg);
      display: flex;
    }

    #column {
      display: flex;
      flex-direction: column;
    }

    .block3 {
      width: 45px;
      height: 45px;
      background-color: black;
      margin: 1px;
      animation: fade .4s linear both;
      animation-delay: 0s;
    }

    .block4 {
      width: 45px;
      height: 45px;
      background-color: black;
      margin: 1px;
      animation: fade .4s linear both;
      animation-delay: .4s;
    }

    .block2 {
      width: 45px;
      height: 45px;
      background-color: black;
      margin: 1px;
      animation: fade .4s linear both;
      animation-delay: .8s;
    }

    .block1 {
      width: 45px;
      height: 45px;
      background-color: black;
      margin: 1px;
      animation: fade .4s linear both;
      animation-delay: 1.2s;
    }

    @keyframes fade {
      0% {
        opacity: 1;
        transform: perspective(140px) rotateX(-180deg);
      }

      100% {
        opacity: 0;
      }
    }

<!DOCTYPE html>
    <html lang="it">
    <head>
      <style>
        body {
          position: absolute;
          margin: 0;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }

        .margin {
          margin-top: 200px;
          left: 50%;
          transform: translate(-50%);
          position: absolute;
        }
      </style>
    </head>

    <body>
      <section class="animation rotate">
        <div id="column">
          <div class="block1"></div>
          <div class="block2"></div>
        </div>
        <div id="column">
          <div class="block3"></div>
          <div class="block4"></div>
        </div>
      </section>
    </body>
    </html>

我什至尝试使用无限属性，但显然它会继续重复每个块：

.rotate {
      transform: rotate(-45deg);
      display: flex;
    }

    #column {
      display: flex;
      flex-direction: column;
    }

    .block3 {
      width: 45px;
      height: 45px;
      background-color: black;
      margin: 1px;
      animation: fade .4s infinite linear both;
      animation-delay: 0s;
    }

    .block4 {
      width: 45px;
      height: 45px;
      background-color: black;
      margin: 1px;
      animation: fade .4s infinite linear both;
      animation-delay: .4s;
    }

    .block2 {
      width: 45px;
      height: 45px;
      background-color: black;
      margin: 1px;
      animation: fade .4s infinite linear both;
      animation-delay: .8s;
    }

    .block1 {
      width: 45px;
      height: 45px;
      background-color: black;
      margin: 1px;
      animation: fade .4s infinite linear both;
      animation-delay: 1.2s;
    }

    @keyframes fade {
      0% {
        opacity: 1;
        transform: perspective(140px) rotateX(-180deg);
      }

      100% {
        opacity: 0;
      }
    }

<!DOCTYPE html>
    <html lang="it">
    <head>
      <style>
        body {
          position: absolute;
          margin: 0;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }

        .margin {
          margin-top: 200px;
          left: 50%;
          transform: translate(-50%);
          position: absolute;
        }
      </style>
    </head>

    <body>
      <section class="animation rotate">
        <div id="column">
          <div class="block1"></div>
          <div class="block2"></div>
        </div>
        <div id="column">
          <div class="block3"></div>
          <div class="block4"></div>
        </div>
      </section>
    </body>
    </html>

总而言之： block1 执行，block2 执行，block3 执行，block4 执行然后从 block1

重复

Answer 1

您需要为每个块创建一个关键帧：

.rotate {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg) ;
  display: flex;
  flex-wrap: wrap;
  width: 100px; /* change this to control the size */
}

.rotate div {
  flex:1 1 48%; /* little less than 50% to consider the margin */
  margin: 1px;
  background-color: black;
  animation: 2s linear infinite;
}
/* maintain square ratio*/
.rotate div::before {
  content: "";
  display: block;
  padding-top: 100%;
}
/**/
.rotate div:nth-child(1) { animation-name:fade4}
.rotate div:nth-child(2) { animation-name:fade1}
.rotate div:nth-child(3) { animation-name:fade3}
.rotate div:nth-child(4) { animation-name:fade2}

/* [0%  first one 20%][20% second one 40%][40% third one 60%][60% fourth one 80%][80%  pause 100%] */
@keyframes fade1 {
  0% {
    opacity: 1;
    transform: perspective(140px) rotateX(-180deg);
  }
  20%,100% {
    opacity: 0;
  }
}
@keyframes fade2 {
  0%,20% {
    opacity: 1;
    transform: perspective(140px) rotateX(-180deg);
  }
  40%,100% {
    opacity: 0;
  }
}
@keyframes fade3 {
  0%,40% {
    opacity: 1;
    transform: perspective(140px) rotateX(-180deg);
  }
  60%,100% {
    opacity: 0;
  }
}
@keyframes fade4 {
  0%,60% {
    opacity: 1;
    transform: perspective(140px) rotateX(-180deg);
  }
  80%,100% {
    opacity: 0;
  }
}

<section class="animation rotate">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

CSS动画，部分动画播放完毕，按顺序重复播放

CSS animation, some animations finish, then repeat them in order

css

spinner

css-animations