html - 如何用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>

Answer 1

我认为您最好的选择是为每个 block 使用单个动画。然后，您可以为每个 block 设置不同延迟的动画(这只会在第一次播放动画时有所不同)

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

.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>