CSS轮播Banner动画异常：图片切换周期紊乱、无法完全显示

核心问题定位 #

你的问题出在动画时长、延迟与关键帧的时间占比不匹配，导致第一张图初始状态被动画覆盖，切换周期错位。下面是针对性的修复代码和逻辑说明：

修复后完整代码 #

HTML结构

<div class="banner">
  <img src="图1地址" class="slide slide-1" alt="图1">
  <img src="图2地址" class="slide slide-2" alt="图2">
  <img src="图3地址" class="slide slide-3" alt="图3">
</div>

CSS样式

.banner {
  position: relative;
  width: 100%;
  height: 400px; /* 根据需求调整高度 */
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: fadeCycle 15s infinite ease-in-out;
}

/* 第一张图：第0-5秒显示，第5-6秒淡出 */
.slide-1 {
  animation-delay: 0s;
}

/* 第二张图：第5-10秒显示，第10-11秒淡出 */
.slide-2 {
  animation-delay: 5s;
}

/* 第三张图：第10-15秒显示，第15-16秒淡出（循环后衔接第一张） */
.slide-3 {
  animation-delay: 10s;
}

@keyframes fadeCycle {
  0% { opacity: 0; }
  /* 淡入阶段：前1秒从0到1 */
  6.67% { opacity: 1; }
  /* 稳定显示阶段：占4秒（5秒总时长-1秒淡入） */
  33.33% { opacity: 1; }
  /* 淡出阶段：最后1秒从1到0 */
  40% { opacity: 0; }
  /* 剩余时间保持透明，等待下一轮 */
  100% { opacity: 0; }
}

关键调整说明 #

• 动画总时长：设为15s（3张×每张5秒），确保循环周期完全对齐。
• 关键帧时间占比：
  • 淡入/淡出各占1s（对应总时长的6.67%到40%区间），剩下的4s是稳定显示时间，加起来刚好5秒/张。
  • 第一张图从0秒开始，直接进入淡入，解决初始opacity无法到1的问题。
• 延迟设置：每张图的延迟等于前一张的总展示时长（5秒），确保切换无缝衔接，周期绝对稳定。

自定义调整建议 #

如果想修改淡入淡出速度，比如改成0.5秒，只需要调整关键帧的百分比：

• 淡入：3.33% { opacity: 1; }
• 稳定显示：33.33% { opacity: 1; }
• 淡出：36.66% { opacity: 0; }
  同时保持总动画时长15秒不变，每张的总展示时间还是5秒。

内容的提问来源于stack exchange，提问作者黃柏瑋