スライドショーCSSで何が問題になっていますか？

Question

私は無限ループで画像が互いにフェードするhtmlとcssだけを使ってスライドショーを作っています。

しかし、私はそれをテストします。最初のイメージは完全に白にフェードインし、次に2番目のイメージがフェードインするのではなく、最初のイメージがフェードアウトし、2番目のイメージが同時にフェードインされます。

これを明確にするために、これは2回目以降のサイクルでのみ発生します。つまり、5つの画像の最初のサイクルは、フェードインとフェードアウトが同時に行われてシームレスに切り替わりますが、スライドショーの次の1サイクルおきにスライド間にホワイトアウトがあります。

これらのトランジションをシームレスにしたいと考えています。明らかに、私は不透明度コントロールかキーフレームタイマーのどちらかでミスを犯しました。

助けてください。とてもありがたい。

CSS：

.css-slideshow { 
    min-width:100%; 
    position: fixed; 
} 

.css-slideshow figure { 
    position: fixed; 
    min-width: 100%; 
    width: 100%; 
    margin: 0 auto; 
} 

figure:nth-child(1) { 
    animation: xfade 24s 24s infinite; 
} 

figure:nth-child(2) { 
    animation: xfade 24s 18s infinite; 
} 

figure:nth-child(3) { 
    animation: xfade 24s 12s infinite; 
} 

figure:nth-child(4) { 
    animation: xfade 24s 6s infinite; 
} 

figure:nth-child(5) { 
    animation: xfade 24s 0s infinite; 
} 

@keyframes xfade { 
    0%{ 
    opacity: 1; 
    } 
    10.5% { 
    opacity: 1; 
    } 
    12.5%{ 
    opacity: 0; 
    } 
    98% { 
    opacity: 0; 
    } 
    100% { 
    opacity: 1; 
    } 
} 

HTML：

<div class="css-slideshow"> 

    <figure> 
     <img src="slider-image1.jpg" width="100%" alt="class-header-css3"/> 
    </figure> 
    <figure> 
     <img src="slider-image2.jpg" width="100%" alt="class-header-semantics"/> 
    </figure> 
    <figure> 
     <img src="slider-image3.jpg" width="100%" alt="class-header-offline"/> 
    </figure> 
    <figure> 
     <img src="slider-image4.jpg" width="100%" alt="class-header-device"/> 
    </figure> 
    <figure> 
     <img src="dfdfdfdfdd.jpg" width="100%" alt="class-header-connectivity"/> 
    </figure> 

    </div> 

Answer 1

.css-slideshow { 
 
    min-width:100%; 
 
    position: fixed; 
 
} 
 

 
.css-slideshow figure { 
 
    position: fixed; 
 
    min-width: 100%; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 

 
figure:nth-child(1) { 
 
    animation: xfade 25s 20s infinite; 
 
} 
 

 
figure:nth-child(2) { 
 
    animation: xfade 25s 15s infinite; 
 
} 
 

 
figure:nth-child(3) { 
 
    animation: xfade 25s 10s infinite; 
 
} 
 

 
figure:nth-child(4) { 
 
    animation: xfade 25s 5s infinite; 
 
} 
 

 
figure:nth-child(5) { 
 
    animation: xfade 25s 0s infinite; 
 
} 
 

 
@keyframes xfade { 
 
    0%{ 
 
    opacity: 1; 
 
    } 
 
    20%{ 
 
    opacity: 0; 
 
    } 
 
    80% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
}

<div class="css-slideshow"> 
 

 
    <figure> 
 
     <img src="https://images.unsplash.com/photo-1468476775582-6bede20f356f?dpr=2&auto=format&crop=entropy&fit=crop&w=1500&h=979&q=80" width="100%" alt="class-header-css3"/> 
 
    </figure> 
 
    <figure> 
 
     <img src="https://images.unsplash.com/photo-1466046690866-98181611563d?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80" width="100%" alt="class-header-semantics"/> 
 
    </figure> 
 
    <figure> 
 
     <img src="https://images.unsplash.com/photo-1468476775582-6bede20f356f?dpr=2&auto=format&crop=entropy&fit=crop&w=1500&h=979&q=80" width="100%" alt="class-header-offline"/> 
 
    </figure> 
 
    <figure> 
 
     <img src="https://images.unsplash.com/photo-1466046690866-98181611563d?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80" width="100%" alt="class-header-device"/> 
 
    </figure> 
 
    <figure> 
 
     <img src="https://images.unsplash.com/photo-1465284958051-1353268c077d?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80" width="100%" alt="class-header-connectivity"/> 
 
    </figure> 
 

 
    </div>

これは動作します。あなたが気づいたことのいくつか： 1）あなたは5枚の画像を持っていましたが、6秒間の遅延を伴う24秒のアニメーションを使用していました。 2）24秒と0秒のアニメーションは、2回目のパスから同時に開始します。 3）アニメーションの遅延の間にギャップがないように、画像が不透明ではありません