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％的過渡，但我不確定嗎？
這裏的任何幫助將是偉大的。