2
我在CSS关键帧动画内出现时间问题。在CSS图像滑块内计时
我有90％的存在，但在外观上每个图像之间都有差距。
我知道这是一个时间问题，但我不能为了我的生活而在不破坏当前功能的情况下让间隙消失。
到目前为止的代码：
.slider {
position: relative;
height: 200px;
width: 300px;
background: gray;
overflow:hidden;
}
.slide,
.slide img {
position: absolute;
top: 0;
left: 0%;
height: 100%;
width: 100%;
}
.slide h1 {
position: absolute;
top: 20%;
right: 0;
height: 10%;
color: white;
}
.slide p {
position: absolute;
top: 40%;
left: 0;
height: 60%;
color: white;
}
.slide {
transform: translateX(100%);
-webkit-animation: slide 20s forwards infinite;
}
.slide:nth-child(2) {
-webkit-animation-delay: 5s;
}
.slide:nth-child(3) {
-webkit-animation-delay: 10s;
}
.slide:nth-child(4) {
-webkit-animation-delay: 15s;
}
@-webkit-keyframes slide {
0% {
transform: translateX(100%);
}
5% {
transform: translateX(0);
}
20% {
transform: translateX(0);
}
25% {
transform: translateX(-100%);
}
100% {
transform: translateX(-100%);
}
}<div class="slider">
<div class="slide">
<img src="http://lorempixel.com/300/200" />
<h1>Slide 1</h1>
<p>Text to do with slide 1</p>
</div>
<div class="slide">
<img src="http://lorempixel.com/600/400" />
<h1>Slide 2</h1>
<p>Text to do with slide 2</p>
</div>
<div class="slide">
<img src="http://lorempixel.com/1200/800" />
<h1>Slide 3</h1>
<p>Text to do with slide 3</p>
</div>
<div class="slide">
<img src="http://lorempixel.com/1800/1200" />
<h1>Slide 4</h1>
<p>Text to do with slide 4</p>
</div>
</div>在我的片段，你可以看到一个短暂的延迟，让灰色的背景下一个图像之前出现。
我的设计将只适合4张图片，这应该在屏幕上每个5秒左右。我很高兴留在这个CSS关键帧（而不是jQuery或外部插件）。
请注意我已经删除了前缀，因此目前支持前缀webkit。
有人请解释我应该如何计时吗？我很确定这是0％ - > 5％的过渡，但我不确定吗？
这里的任何帮助将是伟大的。