CSS图像滑块内的计时

我在CSS关键帧动画中遇到计时问题

我有90%在那里，但我有一个在外观上的每个图像之间的差距

我知道这是一个时间问题，但我无法在不破坏当前功能的情况下让差距消失

迄今为止的代码：

滑块{
位置：相对位置；
高度：200px；
宽度：300px；
背景：灰色；
溢出：隐藏；
}
滑动
.幻灯片图像{
位置：绝对位置；
排名：0；
左：0%；
身高：100%；
宽度：100%；
}
.幻灯片h1{
位置：绝对位置；
最高：20%；
右：0；
身高：10%；
颜色：白色；
}
.幻灯片p{
位置：绝对位置；
最高：40%；
左：0；
身高：60%；
颜色：白色；
}
.幻灯片{
转化：translateX（100%）；
-webkit动画：幻灯片20秒向前无限；
}
.幻灯片：第n个孩子（2）{
-webkit动画延迟：5s；
}
.幻灯片：第n个孩子（3）{
-webkit动画延迟：10秒；
}
.幻灯片：第n个孩子（4）{
-webkit动画延迟：15秒；
}
@-webkit关键帧幻灯片{
0% {
转化：translateX（100%）；
}
5% {
变换：translateX（0）；
}
20% {
变换：translateX（0）；
}
25% {
转化：translateX（-100%）；
}
100% {
转化：translateX（-100%）；
}
}

幻灯片1
与幻灯片1相关的文本

幻灯片2
与幻灯片2相关的文本

幻灯片3
与幻灯片3相关的文本

幻灯片4
与幻灯片4相关的文本

我最终使用了一个类似ghant的图表来处理正在发生的事情，并最终改变了我的关键帧动画。我还添加了第五个图像集，以便保留整秒

我的结局是：

滑块{
位置：相对位置；
高度：200px；
宽度：300px；
背景：灰色；
溢出：隐藏；
}
滑动
.幻灯片图像{
位置：绝对位置；
排名：0；
左：0；
身高：继承；
宽度：继承；
}
.幻灯片{
转化：translateX（100%）；
-webkit动画：幻灯片50秒轻松进退0秒无限；
}
.幻灯片h1{
位置：绝对位置；
最高：20%；
右：0；
身高：10%；
颜色：白色；
}
.幻灯片p{
位置：绝对位置；
最高：40%；
左：0；
身高：60%；
颜色：白色；
}
.幻灯片：第n个孩子（2）{
-webkit动画延迟：10秒；
}
.幻灯片：第n个孩子（3）{
-webkit动画延迟：20秒；
}
.幻灯片：第n个孩子（4）{
-webkit动画延迟：30秒；
}
.幻灯片：第n个孩子（5）{
-webkit动画延迟：40秒；
}
@-webkit关键帧幻灯片{
0% {
转化：translateX（100%）；
}
2% {
变换：translateX（0）；
}
20% {
变换：translateX（0）；
}
22% {
转化：translateX（-100%）；
}
100% {
转化：translateX（-100%）；
}
}

幻灯片1
与幻灯片1相关的文本

幻灯片2
与幻灯片2相关的文本

幻灯片3
与幻灯片3相关的文本

幻灯片4
与幻灯片4相关的文本

幻灯片5
与幻灯片5相关的文本

修复方法是使每个图像在屏幕上停留（处于固定状态或滑入/滑出状态）1/4的动画持续时间。考虑到前5%是滑入，最后5%是滑出，我们必须将滑出设置为25%到30%之间，如下面的片段所示

滑块{
位置：相对位置；
高度：200px；
宽度：300px；
背景：灰色；
溢出：隐藏；
}
滑动
.幻灯片图像{
位置：绝对位置；
排名：0；
左：0%；
身高：100%；
宽度：100%；
}
.幻灯片h1{
位置：绝对位置；
最高：20%；
右：0；
身高：10%；
颜色：白色；
}
.幻灯片p{
位置：绝对位置；
最高：40%；
左：0；
身高：60%；
颜色：白色；
}
.幻灯片{
转化：translateX（100%）；
-webkit动画：幻灯片20秒无限线性；
}
.幻灯片：第n个孩子（2）{
-webkit动画延迟：5s；
}
.幻灯片：第n个孩子（3）{
-webkit动画延迟：10秒；
}
.幻灯片：第n个孩子（4）{
-webkit动画延迟：15秒；
}
@-webkit关键帧幻灯片{
5% {
变换：translateX（0）；/*1s 6s 11s 16s*/
}
25% {
变换：translateX（0）；/*5s 10s 14s 19s*/
}
30% {
转换：translateX（-100%）；/*6S11S16S20S*/
}
100% {
转化：translateX（-100%）；
}    
}

幻灯片1
与幻灯片1相关的文本

幻灯片2
与幻灯片2相关的文本

幻灯片3
与幻灯片3相关的文本

幻灯片4
与幻灯片4相关的文本