如何用CSS实现多元素多动画无限循环？添加animation-iteration-count: infinite仍无效

问题原因 #

你当前的写法为每个加载区块绑定了多个独立的动画（scale-up、scale-down、stay）并设置了延迟，animation-iteration-count: infinite会让每个动画单独循环，而非整个动画序列循环。比如block1的scale-up会重复执行，但不会触发后续的scale-down和stay，导致动画逻辑断裂，看起来没有循环效果。此外，stay动画长达6秒，让大部分时间区块处于静止状态，进一步掩盖了循环效果。

修复方案 #

将每个区块的完整动画流程合并为单个关键帧动画，让整个序列作为一个整体循环；同时调整动画时长，通过延迟控制不同区块的动画顺序，保持原有的错落效果。

修改后的代码 #

CSS部分

.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: block-cycle 8s infinite;
}

.block2 {
  animation: block-cycle 8s infinite 1s;
}

.block4 {
  animation: block-cycle 8s infinite 2s;
}

.block3 {
  animation: block-cycle 8s infinite 3s;
}

/* 单个关键帧包含完整动画流程 */
@keyframes block-cycle {
  0%, 100% { scale: 1; }
  10% { scale: 1.2; } /* 缩放至1.2 */
  20% { scale: 1; } /* 缩回到原大小 */
  /* 剩余时间保持原大小，对应原stay效果 */
}

HTML部分（无需修改）

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

效果说明 #

• 每个区块的动画是完整的循环序列（放大→缩小→静止），infinite会让这个序列不断重复。
• 通过animation-delay设置不同区块的动画启动时间，保持原有的逐个缩放的错落效果。
• 调整后的动画周期为8秒，你可以根据需求修改8s来控制循环速度。

内容的提问来源于stack exchange，提问作者Tharusha Piyumal