Q&A
CSSのみで自動で切り替わるスライドショーの作成方法についてです。
2枚の写真を順番にふわっと表示させたいのですが、
アニメーション終了後透明になってしまいます。
アニメーションは1回のみで、終了したら2枚目の写真を表示させ続けたいのですがどうしたらよいかわかりません。
解決方法を教えていただけたら幸いです。
html
1<body> 2 <div class="main_imgBox"> 3 <div class="main_img" style="background-image: url(./img/pic1.png)"> 4 </div> 5 6 <div class="main_img" style="background-image: url(./img/pic2.png)"> 7 </div> 8 </div> 9</body>
css
1.main_imgBox { 2 height: 680px; 3 overflow: hidden; 4 position: relative; } 5 6 .main_img { 7 z-index:10; 8 opacity: 0; 9 width: 100%; 10 height: 680px; 11 background-position: center center; 12 background-repeat: no-repeat; 13 background-size: cover; 14 position: absolute; 15 left: 0; 16 top: 0; 17 -webkit-animation: anime 12s 0s; 18 animation: anime 12s 0s;} 19 20 .main_img:nth-of-type(2) { 21 -webkit-animation-delay: 3s; 22 animation-delay: 3s; } 23 24 25@keyframes anime { 26 0% { 27 opacity: 0; 28 } 29 20% { 30 opacity: 1; 31 } 32 50% { 33 opacity: 1; 34 } 35 100% { 36 opacity: 1; 37 transform: scale(1.2); 38 } 39 40}
回答1件
0
自己解決
css
1-webkit-animation: anime 8s 0s forwards; 2 animation: anime 8s 0s forwards;}
forwardsを追記したら思うように表示されました！
投稿2021/06/08 13:28
総合スコア8
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。