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
回答1件
あなたの回答
tips
プレビュー