如何用纯CSS3实现3个div循环依次显示？首个div无延迟

我看了你的代码，目前的动画逻辑有点小问题，没法实现完美的依次循环显示。咱们调整一下，用纯CSS就能搞定这个需求，下面是修正后的方案：

核心思路 #

要让三个Div依次循环显示，首先得让它们重叠在同一个位置，然后通过动画控制每个Div在特定时间段内显示，其余时间隐藏，再配合延迟让它们依次启动动画，形成循环效果。

完整代码实现 #

<style>
/* 容器设置相对定位，让子元素可以绝对定位重叠 */
#container {
  position: relative;
  width: 300px; /* 根据你的图片尺寸调整 */
  height: 200px;
}

/* 每个layer绝对定位，重叠在容器内 */
.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation-duration: 9s; /* 总周期：3个元素×每个显示3s */
  animation-name: cycleShow;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards; /* 保持动画结束后的状态 */
  opacity: 0; /* 默认隐藏 */
}

/* 第一个Div无延迟 */
.text1 {
  animation-delay: 0s;
}

/* 第二个Div延迟3s，等第一个显示完再开始 */
.animate-delay-3 {
  animation-delay: 3s;
}

/* 第三个Div延迟6s，等前两个都显示过再开始 */
.animate-delay-6 {
  animation-delay: 6s;
}

/* 关键帧：每个元素只在自己的3s时间段内显示 */
@keyframes cycleShow {
  /* 前33.33%（0-3s）：从隐藏到显示，保持显示 */
  0% { opacity: 0; }
  11.11%, 33.33% { opacity: 1; } /* 用11.11%过渡让切换更自然，避免生硬闪切 */
  /* 33.33%之后隐藏，直到下一轮循环 */
  33.34%, 100% { opacity: 0; }
}
</style>

<div id="container">
  <a href="#">
    <div id="header" class="header"></div>
    <div class="layer text1">
      <img src="div1.png" alt="第一个Div内容">
    </div>
    <div class="layer text1 animate-delay-3">
      <img src="div2.png" alt="第二个Div内容">
    </div>
    <div class="layer text1 animate-delay-6">
      <img src="div3.png" alt="第三个Div内容">
    </div>
  </a>
</div>

代码说明 #

• 重叠布局：通过#container的relative定位和.layer的absolute定位，让三个Div完全重叠，这样才能实现“依次显示”的效果（不然会并排展示）。
• 动画周期：总时长设为9s（3个元素×每个显示3s），确保一轮循环刚好覆盖三个元素的显示时间。
• 延迟控制：三个Div的延迟分别为0s、3s、6s，刚好错开3s的显示窗口，形成依次切换的效果。
• 关键帧优化：用11.11%到33.33%的区间保持显示，让透明度的过渡更平滑，避免生硬的闪切。你也可以调整这个百分比，让过渡时间更长或更短。

这样调整后，就能实现第一个Div无延迟显示3s，然后切换到第二个Div显示3s，再切换到第三个Div显示3s，之后循环重复的效果啦～

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