CSS3轮播最后一张图片时长异常问题求助

嘿，我之前也踩过纯CSS轮播的这个坑！咱们来拆解下问题出在哪，以及怎么快速修复。

问题根源 #

这种纯CSS轮播的核心逻辑其实很简单：所有图片绝对定位叠在一起，靠opacity或z-index控制显示状态；每张图绑定同一个循环动画，通过animation-delay让它们依次上场；动画总时长必须等于所有单张图显示时长的总和（你这里10张×5秒=50秒）。

你遇到第10张超时的问题，大概率是以下两个原因之一：

• 总动画时长没更新：你只改了每张图的animation-delay（0s、5s、10s…45s），但保留了原示例3张图对应的总时长（比如15秒）。这时候第10张的延迟45秒是总时长的3倍，动画要跑完3个循环才会触发第10张显示，而且因为循环逻辑，它会一直显示到下一轮循环的对应阶段，停留时间自然远超5秒。
• 关键帧百分比区间错了：原示例3张图的关键帧每个区间占33.33%，你改成10张后，没把每个图的显示区间调整为10%（也就是0-10%、10-20%…90-100%）。如果第10张的显示区间被设成了90%-110%，或者没设置它在90.01%后隐藏，那它会在动画循环末尾一直显示，直到下一轮第一张图触发隐藏。

解决步骤 #

1. 修正总动画时长

找到轮播图片的动画样式，把animation-duration改成50秒（10张×5秒的总时长）。比如：

.pic-1, .pic-2, ..., .pic-10 {
  animation: slideshow 50s infinite;
}

2. 调整关键帧的百分比区间

确保关键帧里每张图的显示/隐藏区间对应10%的占比。如果是用opacity控制显示，关键帧可以这么写：

@keyframes slideshow {
  /* 第1张：0-5秒（0%-10%）显示 */
  0%, 10% { opacity: 1; z-index: 1; }
  10.01%, 100% { opacity: 0; z-index: 0; }

  /* 第2张：5-10秒（10%-20%）显示 */
  10%, 20% { opacity: 1; z-index: 1; }
  20.01%, 100% { opacity: 0; z-index: 0; }

  /* ... 依次写完前9张的规则 */

  /* 第10张：45-50秒（90%-100%）显示 */
  90%, 100% { opacity: 1; z-index: 1; }
  0.01%, 90% { opacity: 0; z-index: 0; }
}

如果是每张图单独绑定动画，写法更简洁：

@keyframes fade {
  0% { opacity: 1; z-index: 1; }
  9.99% { opacity: 1; z-index: 1; }
  10% { opacity: 0; z-index: 0; }
  100% { opacity: 0; z-index: 0; }
}

.pic-1 { animation: fade 50s infinite 0s; }
.pic-2 { animation: fade 50s infinite 5s; }
.pic-3 { animation: fade 50s infinite 10s; }
/* ... */
.pic-10 { animation: fade 50s infinite 45s; }

3. 检查循环与填充模式

确认所有图片的animation-iteration-count是infinite（无限循环），且animation-fill-mode用默认的none，别设成forwards——不然动画结束后会停在最后一帧，导致图片一直显示。

按这几步调整后，第10张图就会和前9张一样，稳稳显示5秒后切换啦！

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