如何使用CSS使多个元素和多个动画无限循环播放

Question

我需要无限地展示这个CSS动画。我已经添加了animation-iteration-count: infinite;，但它没有生效。 为了让它无限循环播放，我需要做些什么？

.pre-loader-area {
  position: fixed;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  opacity: 1;
}

.pre-loader {
  width: 20vw;
  height: 20vw;
  margin-left: auto;
  margin-right: auto;
  transform: translateY(40vh);
}

.pre-loader-block-line1,
.pre-loader-block-line2 {
  position: relative;
  width: 20vw;
  height: 9vw;
}

.pre-loader-block-line2 {
  position: relative;
  top: 2.5vw;
}

.pre-loader-blocks {
  position: relative;
  float: left;
  background-color: rgba(255, 255, 255, 0.8);
  width: 41%;
  height: 90%;
}

.block2,
.block4 {
  float: right;
}

.block1 {
  animation: scale-up 1s, scale-down 1s 1s, stay 6s 2s;
  animation-iteration-count: infinite;
}

.block2 {
  animation: scale-up 1s 1s, scale-down 1s 2s, stay 6s 3s;
  animation-iteration-count: infinite;
}

.block4 {
  animation: scale-up 1s 2s, scale-down 1s 3s, stay 6s 4s;
  animation-iteration-count: infinite;
}

.block3 {
  animation: scale-up 1s 3s, scale-down 1s 4s, stay 6s 5s;
  animation-iteration-count: infinite;
}

@keyframes scale-up {
  0% {
    scale: 1;
  }
  100% {
    scale: 1.2;
  }
}

@keyframes scale-down {
  0% {
    scale: 1.2;
  }
  100% {
    scale: 1;
  }
}

@keyframes stay {
  0% {
    scale: 1;
  }
  100% {
    scale: 1;
  }
}

<div class="pre-loader-area">
  <div class="pre-loader">
    <div class="pre-loader-block-line1">
      <div class="block1 pre-loader-blocks"></div>
      <div class="block2 pre-loader-blocks"></div>
    </div>
    <div class="pre-loader-block-line2">
      <div class="block3 pre-loader-blocks"></div>
      <div class="block4 pre-loader-blocks"></div>
    </div>
  </div>
</div>

- Tharusha Piyumal

---

我不确定你是否可以轻松地在没有JavaScript的情况下完成这个任务，因为animation-delay不会重复，它只会在第一次发生。顺便说一句，为了重复所有三个动画，你需要添加repeat, repeat, repeat，但正如我所说，这并不能解决根本问题... - silvenon

Answer 1

我认为你最好的选择是使用一个单一的动画来为每个块设置动画效果。然后，您可以使用不同的延迟为每个块设置动画（这仅会影响动画第一次播放时）。

我创建了一个小片段来帮助说明我的意思。

.pre-loader-area {
  position: fixed;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  opacity: 1;
}

.pre-loader {
  width: 20vw;
  height: 20vw;
  margin-left: auto;
  margin-right: auto;
  transform: translateY(40vh);
}

.pre-loader-block-line1,
.pre-loader-block-line2 {
  position: relative;
  width: 20vw;
  height: 9vw;
}

.pre-loader-block-line2 {
  position: relative;
  top: 2.5vw;
}

.pre-loader-blocks {
  position: relative;
  float: left;
  background-color: rgba(255, 255, 255, 0.8);
  width: 41%;
  height: 90%;
}

.block2,
.block4 {
  float: right;
}

.block1 {
  animation: blockAnimation 4s infinite 0s;
}

.block2 {
  animation: blockAnimation 4s infinite 1s;
}

.block3 {
  animation: blockAnimation 4s infinite 3s;
}

.block4 {
  animation: blockAnimation 4s infinite 2s;
}

@keyframes blockAnimation {
  0% {
    scale: 1;
  }
  20% {
    scale: 1.2;
  }
  40% {
    scale: 1;
  }
  100% {
    scale: 1;
  }
}

<div class="pre-loader-area">
  <div class="pre-loader">
    <div class="pre-loader-block-line1">
      <div class="block1 pre-loader-blocks"></div>
      <div class="block2 pre-loader-blocks"></div>
    </div>
    <div class="pre-loader-block-line2">
      <div class="block3 pre-loader-blocks"></div>
      <div class="block4 pre-loader-blocks"></div>
    </div>
  </div>
</div>

- Boguz

Answer 2

从您设置的时间和延迟来看，似乎每个正方形都希望扩展一秒钟，收缩一秒钟，然后无所事事地挂在那里六秒钟。

因此，完整周期的总时间为8秒。

您可以创建一个关键帧集，该集合将元素缩放为迭代持续时间的1/8，进一步缩放为另外的1/8，然后不做任何事情6/8。

@keyframes scale {
  0%, 25%, 100% { scale: 1; }
  12.5% {scale: 1.2; }
}

这个动画的持续时间为8秒，对于每个块都是相同的。

然后每个块都有自己的延迟。第一个块的延迟为0秒，第二个块为1秒，以此类推。

.pre-loader-area {
  position: fixed;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  opacity: 1;
}

.pre-loader {
  width: 20vw;
  height: 20vw;
  margin-left: auto;
  margin-right: auto;
  transform: translateY(40vh);
}

.pre-loader-block-line1,
.pre-loader-block-line2 {
  position: relative;
  width: 20vw;
  height: 9vw;
}

.pre-loader-block-line2 {
  position: relative;
  top: 2.5vw;
}

.pre-loader-blocks {
  position: relative;
  float: left;
  background-color: rgba(255, 255, 255, 0.8);
  width: 41%;
  height: 90%;
  animation: scale 8s var(--delay) infinite;
}

.block2,
.block4 {
  float: right;
}

.block1 {
  --delay: 0s;
}

.block2 {
  --delay: 1s;
}

.block4 {
  --delay: 3s;
}

.block3 {
  --delay: 2s;
}

@keyframes scale {
  0%,
  25%,
  100% {
    scale: 1;
  }
  12.5% {
    scale: 1.2;
  }
}

@keyframes scale-up {
  0% {
    scale: 1;
  }
  100% {
    scale: 1.2;
  }
}

@keyframes scale-down {
  0% {
    scale: 1.2;
  }
  100% {
    scale: 1;
  }
}

@keyframes stay {
  0% {
    scale: 1;
  }
  100% {
    scale: 1;
  }
}

<div class="pre-loader-area">
  <div class="pre-loader">
    <div class="pre-loader-block-line1">
      <div class="block1 pre-loader-blocks"></div>
      <div class="block2 pre-loader-blocks"></div>
    </div>
    <div class="pre-loader-block-line2">
      <div class="block3 pre-loader-blocks"></div>
      <div class="block4 pre-loader-blocks"></div>
    </div>
  </div>
</div>

- A Haworth