CSSイメージのクロスフェードが正しく機能しない

Question

3つのイメージがありますが、3番目のイメージの最後には画面が空白になります。長い間、最初のイメージが再び現れますが、3番目のイメージの直後に再び表示されます。私が得ることができるどんな助けにも本当に感謝します。ありがとう。ここでhttps://jsfiddle.net/5pk3zycq/

コードです：とき、画像の遅延

#crossfade > img { 
 
width: 100%; 
 
height: 100%; 
 
position: absolute; 
 
top: 0px; 
 
left: 0px; 
 
color: transparent; 
 
opacity: 0; 
 
z-index: 0; 
 
-webkit-backface-visibility: hidden; 
 
-webkit-animation: imageAnimation 30s linear infinite 0s; 
 
-moz-animation: imageAnimation 30s linear infinite 0s; 
 
-o-animation: imageAnimation 30s linear infinite 0s; 
 
-ms-animation: imageAnimation 30s linear infinite 0s; 
 
animation: imageAnimation 30s linear infinite 0s; 
 
} 
 

 
#crossfade > img:nth-child(2) { 
 
background-image: url(images/background-2.jpg); 
 
-webkit-animation-delay: 6s; 
 
-moz-animation-delay: 6s; 
 
-o-animation-delay: 6s; 
 
-ms-animation-delay: 6s; 
 
animation-delay: 6s; 
 
} 
 

 
#crossfade > img:nth-child(3) { 
 
background-image: url(images/background-3.png); 
 
-webkit-animation-delay: 12s; 
 
-moz-animation-delay: 12s; 
 
-o-animation-delay: 12s; 
 
-ms-animation-delay: 12s; 
 
animation-delay: 12s; 
 
}

<div id="crossfade"> 
 
    <img src="images/background-1.jpg" alt="Image 1"> 
 
    <img src="images/background-2.jpg" alt="Image 2"> 
 
    <img src="images/background-3.png" alt="Image 3"> 
 
</div>

Answer 1

あなたは30秒の代わりに18にアニメーションのサイクルを設定しているだけであること、あなたの問題ではありませんができますか？

Answer 2

あなたのアニメーション（30秒に非常に長い遅延を持っているように見えるが...なぜ30に設定します6つだけですか？6つも長く...）他の問題の中で..あなたはキーフレームが存在しないようです。そうでなければ投稿されません。徐々に画像をフェードアウトさせたい場合は、キーフレームの動きで不透明度を低く設定できます。

あなたの画像にIDがない場合、特に関連する画像のグループがある場合は、常に画像を提供することをお勧めします。 imageAnimationクラスを追加したので、画像に含まれるコードを簡単に確認できます。コード内でアニメーションの近くに他のイメージがある場合は、後で開発中に見るのが難しい場合があります。

divにキーフレームとコードを挿入しました（画像は投稿されていません）。

希望これは

img.imageAnimation { 
 
display:inline!important; 
 
position:relative; 
 
width: 200px; 
 
height: 120px; 
 
top: 0px; 
 
left: 0px; 
 
background-color: transparent; 
 
opacity:.8; 
 
z-index:1; 
 
-webkit-backface-visibility: hidden; 
 
-webkit-animation: imageAnimation 6s linear 2s infinite alternate; 
 
-moz-animation: imageAnimation 6s linear infinite 6s; 
 
-o-animation: imageAnimation 6s linear infinite 6s; 
 
-ms-animation: imageAnimation 6s linear infinite 6s; 
 
animation: imageAnimation 6s linear infinite 6s ; 
 
} 
 

 
@-webkit-keyframes imageAnimation { 
 
    0% {left:600px; top:0px; opacity:.8;} 
 
    25% {left:400px; top:0px; opacity:.6;} 
 
    50% {left:200px; top:0px; opacity:.4;} 
 
    75% {left:0px; top:0px; opacity:.2;} 
 
    100% {left:-200px; top:0px; opacity:0;} 
 
} 
 

 
/* Standard syntax */ 
 
@keyframes imageAnimation { 
 
    0% {left:600px; top:0px; opacity:.8;} 
 
    25% {left:400px; top:0px; opacity:.6;} 
 
    50% {left:200px; top:0px; opacity:.4;} 
 
    75% {left:0px; top:0px; opacity:.2;} 
 
    100% {left:-200px; top:0px; opacity:0;} 
 
} 
 

 
#crossfade { 
 
    width: 610px; 
 
    height: 150px; 
 
    background-color: transparent; 
 
    position: absolute; 
 
    overflow-x:hidden!important; 
 
}

<div id="crossfade"> 
 

 
    <img class="imageAnimation" src="http://www.rachelgallen.com/images/yellowflowers.jpg" alt="Image 1"> 
 
    <img class="imageAnimation" src="http://www.rachelgallen.com/images/mountains.jpg" alt="Image 2"> 
 
    <img class="imageAnimation" src="http://www.rachelgallen.com/images/purpleflowers.jpg" alt="Image 3"> 
 
</div>