フェードイン/アウトディレイ付きCSSスライドショー

Question

フェードイン/アウトエフェクトを行うキーフレームで3つの画像をアニメーション化したCSSスライドショーを作成しました。これまでのところ、とてもうまい。しかし、スライドショーの2番目のループにアニメーションに問題があります。

私のベストを説明するつもりです：最初のループアニメーションは完璧に動作しますが、最初のイメージが再び戻ってくると、避けたいすべてのスライドに白いフェードがあります。

なぜ最初のループが完全に機能しているのかわからないし、他のループがこの白いフェードから白の問題を持っているのか分かりません。この問題はスニペットで確認できます。

ヘルプは本当に感謝しています！

.imgbox{ 
 
    display: flex; 
 
    align-items: center; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-position: center center; 
 
    background-size: cover; 
 
} 
 

 
#img1{ 
 
    position: absolute; 
 
    z-index: 3; 
 
    -webkit-animation: slideshow 15s linear 0s infinite; 
 
    -moz-animation: slideshow 15s linear 0s infinite; 
 
    -ms-animation: slideshow 15s linear 0s infinite; 
 
    -o-animation: slideshow 15s linear 0s infinite; 
 
    animation: slideshow 15s linear 0s infinite; 
 
} 
 

 
#img2{ 
 
    position: absolute; 
 
    z-index: 2; 
 
    -webkit-animation: slideshow 15s linear 5s infinite; 
 
    -moz-animation: slideshow 15s linear 5s infinite; 
 
    -ms-animation: slideshow 15s linear 5s infinite; 
 
    -o-animation: slideshow 15s linear 5s infinite; 
 
    animation: slideshow 15s linear 5s infinite; 
 
} 
 

 
#img3{ 
 
    position: absolute; 
 
    z-index: 1; 
 
    -webkit-animation: slideshow 15s linear 10s infinite; 
 
    -moz-animation: slideshow 15s linear 10s infinite; 
 
    -ms-animation: slideshow 15s linear 10s infinite; 
 
    -o-animation: slideshow 15s linear 10s infinite; 
 
    animation: slideshow 15s linear 10s infinite; 
 
} 
 

 
@-webkit-keyframes slideshow { 
 
    25% { opacity: 1;} 
 
    30% { opacity: 0;} 
 
    95% { opacity: 0;} 
 
    100% { opacity: 1;} 
 
} 
 
@-moz-keyframes slideshow { 
 
    25% { opacity: 1;} 
 
    30% { opacity: 0;} 
 
    95% { opacity: 0;} 
 
    100% { opacity: 1;} 
 
} 
 
@-ms-keyframes slideshow { 
 
    25% { opacity: 1;} 
 
    30% { opacity: 0;} 
 
    95% { opacity: 0;} 
 
    100% { opacity: 1;} 
 
} 
 
@-o-keyframes slideshow { 
 
    25% { opacity: 1;} 
 
    30% { opacity: 0;} 
 
    95% { opacity: 0;} 
 
    100% { opacity: 1;} 
 
} 
 
@keyframes slideshow { 
 
    25% { opacity: 1;} 
 
    30% { opacity: 0;} 
 
    95% { opacity: 0;} 
 
    100% { opacity: 1;} 
 
}

<div id="img1" class="imgbox" style="background-image: url('http://img2.netcarshow.com/Ford-GT90_Concept_1995_800x600_wallpaper_01.jpg');"> 
 
</div> 
 

 
<div id="img2" class="imgbox" style="background-image: url('http://img2.netcarshow.com/Mercedes-Benz-SLR_McLaren_2004_800x600_wallpaper_02.jpg');"> 
 
</div> 
 
    
 
<div id="img3" class="imgbox" style="background-image: url('http://img2.netcarshow.com/Porsche-911_Carrera_4S_2002_800x600_wallpaper_0d.jpg');"> 
 
</div>

Answer 1

.imgbox{ 
    display: flex; 
    align-items: center; 
    height: 100%; 
    width: 100%; 
    background-position: center center; 
    background-size: cover; 
} 

#img1{ 
    position: absolute; 
    z-index: 3; 
    animation: xfade 15s -0s infinite; 
    animation-timing-function: ease-in-out; 
} 

#img2{ 
    position: absolute; 
    z-index: 2; 
    animation: xfade 15s -5s infinite; 
    animation-timing-function: ease-in-out; 
} 

#img3{ 
    position: absolute; 
    z-index: 1; 
    animation: xfade 15s -10s infinite; 
    animation-timing-function: ease-in-out; 
} 

@keyframes xfade{ 

    0% {opacity: 0;} 
    20% {opacity: 1;} 
    33% {opacity: 1;} 
    53% {opacity: 0;} 
    100% {opacity: 0;} 
} 

私はちょうどあなたのための更新されたバージョンとjsfiddleを設定します。 https://jsfiddle.net/87axbx1o/ は、それはあなたのためにうまく動作するかどうか、私に教えてください