CSS动画关键帧百分比问题

我以前发布过关于CSS关键帧动画的文章，并尝试了使用延迟的不同方法

我有css连续滑块的5个div的工作很好。然而，我需要删除两个div，因此只有三个div

.wrapper{
位置：相对位置；
高度：330px；
显示：网格；
溢出：隐藏；
宽度：600px；
背景#f1f1；
}
.幻灯片{
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
动画：滑块9的立方贝塞尔（0.5,1,0.5,1）无限大；
颜色：#fff；
字体大小：30px；
文本对齐：居中；
垫面：25%；
}
.幻灯片：第一种类型{
动画延迟：-9秒；
背景：红色；
}
.幻灯片：第n张类型（2）{
动画延迟：-6s；
背景：蓝色；
}
.幻灯片：最后一张{
动画延迟：-3s；
背景：黑色；
}
@关键帧滑块{
0% {
变换：translateX（0）；
不透明度：1；
} 
16% {
变换：translateX（0）；
不透明度：1；
} 
20% {
转化：translateX（100%）；
不透明度：1；
} 
75% {
转化：translateX（100%）；
不透明度：0；
} 
76% {
转化：translateX（-100%）；
不透明度：0；
} 
96% {
转化：translateX（-100%）；
不透明度：1；
} 
}

1.
2.
3.

关键帧百分比与动画持续时间相关。例如：对于10秒动画，10%表示1秒标记，50%表示5秒标记，100%表示10秒标记

如果整个动画的长度为9秒，并且有3张幻灯片都以3秒的偏移量开始，那么您需要确保幻灯片在关键帧动画的前33.33%（3秒）内完成其功能，并在剩余的66.66%（6秒）内保持隐藏状态

现在，在您的情况下，幻灯片过渡不是即时的，因此您必须稍微超过33.33%，以确保动画重叠良好，没有间隙。你看到的延迟就是这些差距

因此，考虑到这一点，您可以将其简化为：

@keyframes slider {
  /* Start left off screen */
  0% {
    transform: translateX(-100%);
  }
  /* Move to visible position within 8% of 9 seconds (less than a second). */
  8% {
    transform: translateX(0);
  } 
  /* Stay until at least 3 second mark (33% of 9s). */
  33.33% {
    transform: translateX(0);
  } 
  /* Move offscreen to the right while
     the next slide is moving in.
     Same duration as slide-in (8%), but starting at 33.33%,
     so 33.33% + 8% = 41.33%.
  */
  41.33% {
    transform: translateX(100%);
  } 
  /* Stay there until the end. */
  100% {
    transform: translateX(100%);
  }
}

这里有一个片段：

.wrapper{
位置：相对位置；
高度：330px；
显示：块；
溢出：隐藏；
宽度：600px；
背景#f1f1；
}
.幻灯片{
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
动画：滑块9的立方贝塞尔（0.5,1,0.5,1）无限大；
颜色：#fff；
字体大小：30px；
文本对齐：居中；
垫面：25%；
}
.幻灯片：第一种类型{
动画延迟：-9秒；
背景：红色；
}
.幻灯片：第n张类型（2）{
动画延迟：-6s；
背景：蓝色；
}
.幻灯片：最后一张{
动画延迟：-3s；
背景：黑色；
}
.包装纸{
位置：相对位置；
高度：330px；
显示：块；
溢出：隐藏；
宽度：600px；
背景#f1f1；
}
.幻灯片{
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
动画：滑块9的立方贝塞尔（0.5,1,0.5,1）无限大；
颜色：#fff；
字体大小：30px；
文本对齐：居中；
垫面：25%；
}
.幻灯片：第一种类型{
动画延迟：-9秒；
背景：红色；
}
.幻灯片：第n张类型（2）{
动画延迟：-6s；
背景：蓝色；
}
.幻灯片：最后一张{
动画延迟：-3s；
背景：黑色；
}
@关键帧滑块{
/*从屏幕左侧开始*/
0% {
转化：translateX（-100%）；
}
/*在9秒内（少于1秒）的8%内移动到可见位置*/
8% {
变换：translateX（0）；
} 
/*至少停留3秒（9秒的33%）*/
33.33% {
变换：translateX（0）；
} 
/*移动到屏幕外的右侧，同时
下一张幻灯片即将开始。
与滑入相同的持续时间（8%），但从33.33%开始，
因此，33.33%+8%=41.33%。
*/
41.33% {
转化：translateX（100%）；
} 
/*一直呆到最后*/
100% {
转化：translateX（100%）；
}
}

1.
2.
3.

您的代码只有3个div。你只有3个，为什么还要提到你有5个？如果只滑出一个图像并滑入另一个图像，则0%和100%只需要%s。中间%值只有在动画过程中要更改特定点的行为时才是必需的。@TylerH对于我所指的div数的混淆，很抱歉，我已经编辑了这方面的问题。在动画方面，我需要一个滑入并暂时等待，然后滑出，同时下一个div无缝滑入并使其不断循环。这就是为什么我有这些中间%值。谢谢！那太好了。另外，对于类似这样的项目数量的未来变化的解释也是非常有帮助的