最後の画像のスライドが速すぎる

Question

cssを使用してHTML内のスライドです。 しかし、最後の画像にスライドすると（最後の画像の長さが短すぎます）、最初の画像に移動します。残りの画像はすべて問題ありません。ここで

はHTML部分である：ここで

<div id="slider" style="text-align: center"> 
<figure> 
<img src="pics/img01.png"> 
<img src="pics/img02.png"> 
<img src="pics/img03.png"> 
<img src="pics/img04.png"> 
<img src="pics/img05.png"> 
</figure></div> 

は、CSSの一部です：

@keyframes slidy{ 
0%{left: 0%;} 
20%{left: 0%;} 
35%{left: -100%;} 
45%{left: -150%;} 
55%{left: -200%;} 
65%{left: -250%;} 
75%{left: -300%;} 
95%{left: -350%;} 
100%{left: -400%;} 
} 
body { margin: 100px left; } 
div#slider { overflow: hidden; } 
div#slider figure img { width: 20%; float: left; } 
div#slider figure { 
    position: relative; 
    width: 500%; 
    margin: 0; 
    left: 0; 
    text-align: left; 
    font-size: 0; 
    animation: 30s slidy infinite; 
} 

Answer 1

ええ、私はあなたのスライドショーの問題を修正しました。非常にスムーズに実行されます。codepen hereを確認してください。

あなたが念頭に置いておくべきCSSスライダの主な点は、&に指定した幅内で異なるスライドをスライドさせる方法を指定したwidthです。そのすべての幅のバランスを維持することについては、&は、幅をカバーするその1サイクルを完了するのにかかる時間です。

あなたのケースでは、5枚の画像がありますが、@キーフレームが非常に多くのレベル（レベルは各画像の幅に依存します）に崩れています。

私は以下に示すように、それは&壊れあなたの@keyframesをどのように機能するかを示す画像が含まれている：

@keyframes slidy{ 
    0%{left: 0%;} 
    25%{left: -100%;} 
    50%{left: -200%;} 
    75%{left: -300%;} 
    100%{left: -400%;} 
} 

チェックthis codepen &それは