Html CSS幻灯片显示问题，最后一张图像未显示，但仅在瞬间显示

我已经创建了一个幻灯片，其中有许多来自其他非常有才华的人的输入（我正在学习）。然而，我的代码似乎一直到了第五张图片，但很快又回到了第一张图片，而不是像前四张幻灯片一样停留在同一个时间表上。我试图避免使用JS或jQuery。我觉得它更容易阅读，尤其是考虑到我几乎没有Java背景

以下是我当前使用的代码：

@导入url(http://fonts.googleapis.com/css?family=Istok+网络）；
@滑动关键帧{
0% {
左：0%；
}
20% {
左：0%；
}
25% {
左-100%；
}
45% {
左-100%；
}
50% {
左-200%；
}
70% {
左-200%；
}
75% {
左-300%；
}
95% {
左-300%；
}
100% {
左-400%；
}
}
身体，
身材{
保证金：0；
背景：#101010；
字体系列：Istok Web，无衬线；
字号：100；
}
标题画廊{
宽度：100%；
溢出：隐藏；
}
figure.slider{
位置：相对位置；
宽度：500%；
字号：0；
动画：60年代滑无限；
}
图.滑块图{
宽度：20%；
高度：自动；
显示：内联块；
职位：继承；
}
图1.2滑块img{
宽度：100%；
身高：95%；
}
figure.slider figcaption{
位置：绝对位置；
底部：0；
背景：rgba（0,0,0,0.4）；
颜色：#fff；
宽度：100%；
字号：2rem；
填充：.6rem；
}

---

在我解释为什么最后一张图像只在一瞬间显示之前，为了使幻灯片正常工作，还需要做一些其他更改：

• 所讨论的CSS似乎是在假设只有5个图像的情况下编码的，但是HTML标记有6个

  。slider figure

  元素。我不确定这是故意的还是错误的，但我将根据提供的HTML解释更改
• 首先，应该将

  figure.slider

  的宽度从

  500%

  更改为

  600%

  ，因为有六个图像，每个图像的宽度必须是

  100%

  宽度（即覆盖整个身体）。这应始终计算为（元素数量*100%）。如果不这样做，一些图像将换行到下一行，并且由于父级上的

  溢出：隐藏设置而被隐藏

• 接下来，应该将

  figure.slider figure

  的宽度从

  20%

  更改为

  16.67%

  ，因为我们现在有六个图像，因此每个图像的宽度应为100%的1/6
• 当我们有5个图像时，在

  左侧：0%

  ，将显示第一个图像，在

  左侧：-100%

  ，将显示第二个图像，因此仅在

  左侧：-400%

  将显示第五个图像。根据相关规范，

  left:-300%

  至

  left:-400%

  移动仅在

  95%

  至

  100%

  之间发生，因此第五幅图像仅在

  100%

  处完全可见，这与动画结束时间相同，这就是最后一幅图像仅在瞬间显示的原因
• 为了解决上述问题，应更改

  关键帧

  规则。因为在我们的案例中，我们已经拍摄了6张图像，我们需要5（n-1）个幻灯片移动，每个幻灯片移动都是在动画持续时间的

  5%

  上完成的。这意味着滑梯运动总共消耗了持续时间的25%。现在剩下的

  75%

  应该在图像元素之间平均分割，这样每个元素在消失之前都可以看到x秒。因此，我们得出每个图像的

  12.5%

  停留时间和

  5%

  幻灯片移动时间。一旦我们对

  @关键帧进行了此修改，我们可以看到每个图像都获得了它们的屏幕时间（即60秒=7.5秒的12.5%）

@导入url(http://fonts.googleapis.com/css?family=Istok+网络）；
@滑动关键帧{
0% {
左：0%；
}
12.5% {
左：0%；
}
17.5% {
左-100%；
}
30% {
左-100%；
}
35% {
左-200%；
}
47.5% {
左-200%；
}
52.5% {
左-300%；
}
65% {
左-300%；
}
70% {
左-400%；
}
82.5% {
左-400%；
}  
87.5% {
左-500%；
}
100% {
左-500%；
}  
}
身体，
身材{
保证金：0；
背景：#101010；
字体系列：Istok Web，无衬线；
字号：100；
}
标题画廊{
宽度：100%；
溢出：隐藏；
}
figure.slider{
位置：相对位置；
宽度：600%；
字号：0；
动画：60年代滑无限；
}
图.滑块图{
宽度：16.66%；
高度：自动；
显示：内联块；
职位：继承；
}
图1.2滑块img{
宽度：100%；
身高：95%；
}
figure.slider figcaption{
位置：绝对位置；
底部：0；
背景：rgba（0,0,0,0.4）；
颜色：#fff；
宽度：100%；
字号：2rem；
填充：.6rem；
}

哈利！伙计！你太棒了！最好的解释！我一直在想这个问题，你让它听起来简单多了。非常感谢你。我试过这个密码，效果很好。现在，如果我需要编辑@keyframes中的任何内容，我知道怎么做。我真的很感谢你的帮助。很好的回答，你的第5点明确了关键帧移动的计算+1.