CSS animation スライドショー ループさせない方法

Question

css animationを使ったスライドショーを実装しております。
4枚画像を使っており、4枚目の表示で静止させたいです。

下記ソースですと、4枚目のスライドショーが静止されるのですが、4枚目が表示されてから20秒後位に真っ白になってしまいました。
解決方法をご教示いただけますよう、よろしくお願いします。

■HTML

<div class="img_main"> <img class="img1" src="img/index/main1.svg" alt="" /> <img class="img2" src="img/index/main2.svg" alt="" /> <img class="img3" src="img/index/main3.svg" alt="" /> <img class="img4" src="img/index/main4.svg" alt="" /> </div>

■SASS

.img_main
	position: relative
	img
		position: absolute
		top: 0
		opacity: 0
	img.img1
		animation: fadeinout 20s 0s 1
	img.img2
		animation: fadeinout 20s 5s 1
	img.img3
		animation: fadeinout 20s 10s 1
	img.img4
		animation: fadein 20s 15s 1

@keyframes fadeinout
	0%
		opacity: 0
	5%
		opacity: 1
	25%
		opacity: 1
	30%
		opacity: 0
	100%
		opacity: 0
@keyframes fadein
	0%
		opacity: 0
	5%
		opacity: 1
	100%
		opacity: 1

Comments

[m.ts10806]

念のため「SASS」「HTML」もタグに入れておいてください。

[m.ts10806]

あとSASSのままではなく、コンパイル後の実際にWebで読み込まれるCSSを提示されたほうが再現確認もしやすくなるので、ご提示いただければと。

[risadesign]

ご返信遅くなり、大変失礼いたしました。次回より、SASSのままでなく、cssも掲載いたします。また、コードは全てHTMLタグに追加いたします。ご指摘いただき、ありがとうございました。

[m.ts10806]

質問は編集可能なので適宜ご対応いただければと思います

Answer 1

animation-fill-mode の初期値は none のため、アニメーションが終わればなかったことになってしまいます。both などを指定しておきましょう。
https://developer.mozilla.org/ja/docs/Web/CSS/animation-fill-mode

Comments

[risadesign]

どうもありがとうございます！
最後画像のanimationの値をbothに変更したところ、解決いたしました！