纯CSS3轮播10张幻灯片的百分比计算及keyframes适配求助

我来帮你搞定这个纯CSS轮播的百分比计算问题！首先得搞清楚5张图的keyframes逻辑，然后就能轻松推导10张的计算方式了。

纯CSS轮播的关键是容器宽度和动画关键帧百分比的对应关系：

• 假设你有N张幻灯片，容器总宽度必须是 N * 100%（这样每张幻灯片占容器的 100%/N 宽度）
• 动画核心是把容器向左平移，每次移动 -100%（相对于容器自身宽度），从而切换到下一张
• 整个动画周期分为 2*N 个阶段：N次停留（显示每张图）+ N次过渡（切换到下一张）

百分比计算公式 #

假设你希望：

• 每张幻灯片的停留时间占总动画时长的比例为 P%
• 每张幻灯片的过渡时间占总动画时长的比例为 Q%

那么必须满足：N*(P + Q) = 100% → 也就是每个「停留+过渡」的单元占总时长的 100%/N

举个实用比例：让停留时间是过渡时间的4倍（比如每张停留4秒，过渡1秒，总时长就是10*(4+1)=50秒），那么：

• P = 8%（4/(4+1)=80%，每个单元是10%，所以80%*10%=8%）
• Q = 2%（20%*10%=2%）

先补全你的HTML结构到10个<figure>：

<div id="captioned-gallery">
  <figure class="slider">
    <figure><img src="./files/auto1.jpg" alt="Slide 1"></figure>
    <figure><img src="./files/auto8.jpg" alt="Slide 2"></figure>
    <figure><img src="./files/auto2.jpg" alt="Slide 3"></figure>
    <figure><img src="./files/auto3.jpg" alt="Slide 4"></figure>
    <figure><img src="./files/auto4.jpg" alt="Slide 5"></figure>
    <figure><img src="./files/auto5.jpg" alt="Slide 6"></figure>
    <figure><img src="./files/auto6.jpg" alt="Slide 7"></figure>
    <figure><img src="./files/auto7.jpg" alt="Slide 8"></figure>
    <figure><img src="./files/auto9.jpg" alt="Slide 9"></figure>
    <figure><img src="./files/auto10.jpg" alt="Slide 10"></figure>
  </figure>
</div>

然后是CSS，重点看keyframes的计算逻辑：

#captioned-gallery {
  width: 100%;
  overflow: hidden; /* 隐藏超出父容器的部分 */
  margin: 0;
}

.slider {
  width: 1000%; /* 10张图 → 10*100% = 1000% */
  display: flex; /* 让所有幻灯片排成一行 */
  position: relative;
  animation: slider 50s infinite ease-in-out; /* 总时长50s，循环播放，过渡更平滑 */
}

.slider figure {
  width: 10%; /* 100%/10 = 10%，每张图占容器的10%宽度 */
  margin: 0;
}

.slider img {
  width: 100%; /* 图片填满父容器 */
  height: auto;
}

/* 关键帧动画：按我们的比例计算每个阶段 */
@keyframes slider {
  /* 第1张：停留到8%，过渡到10% */
  0% { transform: translateX(0); }
  8% { transform: translateX(0); }
  10% { transform: translateX(-100%); }
  
  /* 第2张：停留到18%，过渡到20% */
  18% { transform: translateX(-100%); }
  20% { transform: translateX(-200%); }
  
  /* 第3张 */
  28% { transform: translateX(-200%); }
  30% { transform: translateX(-300%); }
  
  /* 第4张 */
  38% { transform: translateX(-300%); }
  40% { transform: translateX(-400%); }
  
  /* 第5张 */
  48% { transform: translateX(-400%); }
  50% { transform: translateX(-500%); }
  
  /* 第6张 */
  58% { transform: translateX(-500%); }
  60% { transform: translateX(-600%); }
  
  /* 第7张 */
  68% { transform: translateX(-600%); }
  70% { transform: translateX(-700%); }
  
  /* 第8张 */
  78% { transform: translateX(-700%); }
  80% { transform: translateX(-800%); }
  
  /* 第9张 */
  88% { transform: translateX(-800%); }
  90% { transform: translateX(-900%); }
  
  /* 第10张：停留到98%，过渡回0%（第1张） */
  98% { transform: translateX(-900%); }
  100% { transform: translateX(0); }
}

大概率是这几个问题：

1. 容器宽度没改：5张时是500%，10张必须改成1000%，否则幻灯片会挤在一起
2. 关键帧百分比没对应：5张时每个「停留+过渡」单元是20%（100%/5），10张时每个单元是10%，停留和过渡的百分比要按这个单元拆分
3. 最后过渡没回到起点：10张的最后一个过渡是从 -900% 回到 0%，而不是 -1000%，否则会出现空白

如果你想改停留/过渡的时长比例：

• 比如想让过渡更快，改成停留7%、过渡3%，只需要把keyframes里的8%改成7%，10%不变即可
• 总动画时长可以随便改：比如总时长30s，那么每张停留2.4s（7%*30），过渡0.6s（3%*30），效果一致

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