html+CSSのみで作るスライドショー

html+cssで、前画像の上に右⇒左へスライドするスライドショーを試験しています。
画像は4枚です。
繰り返しは無限。

1回目は上手く行くのですが、2回目以降が上手く行きません。

CSSの何処を直せば良いか、ご教授下さい。
サンプルは以下です。
https://www.tfumi01.com

右クリックでソースを見て頂けますが、下記します。

○html
<div class="photobox">
<img src="1.gif" alt="スライドショー1" />
<img src="2.gif" alt="スライドショー2" />
<img src="3.gif" alt="スライドショー3" />
<img src="4.gif" alt="スライドショー4" />
</div>

○css
.photobox {
position : relative;
overflow : hidden;
width : 500px;
height : 150px;
margin : 0 auto;
background : #fff;
}

.photobox img {
display : block;
position : absolute;
width : inherit;
height : inherit;
left : 100%;
animation : slideAnime 20s ease infinite;
}
/*アニメーションを段差で開始 */
.photobox img:nth-of-type(1) { animation-delay: 0s; }
.photobox img:nth-of-type(2) { animation-delay: 5s; }
.photobox img:nth-of-type(3) { animation-delay: 10s; }
.photobox img:nth-of-type(4) { animation-delay: 15s; }

/*スライドのアニメーション */
@keyframes slideAnime{
1% { left: 100% }
23% { left: 0% }
100% { left: 0% }
}

No.1 ベストアンサー 回答者： fujillin 回答日時： 2020/12/15 13:02

こんにちは

CSSアニメーションは、あまり知らないのですが…

＞1回目は上手く行くのですが、2回目以降が上手く行きません。
1回目 = 1周目ってことですよね？

最初は、何も表示されていないところへ順に重ねて表示してゆくことになるので問題はありませんが、2巡目になると、（1巡目の）最後の画像が残っているので、その上に最初の画像を表示しなければならないところがうまくいかない原因だと思います。
繰り返しをしばらく待ってみると、最後の画像だけが繰り返しているのを見られると思います。

HTMLソースをそのままとするなら、z-indexで制御してあげれば良さそうですね。
…ということで、こんなのではいかがでしょうか？

@keyframes slideAnime{
0% { left: 100%; z-index:10; }
23% { left: 0%; }
50% { left: 0%; }
51% { left: 100%; z-index: 1; }
}

この回答へのお礼

ソーカーぁ・・・。優先順位を付ける・・・。
上手く行きました。
有難う御座います。感謝です。

お礼日時：2020/12/15 13:46