CSSのスライドで画像が透明になってしまう

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件

自己解決

css
1-webkit-animation: anime 8s 0s forwards;
2    animation: anime 8s 0s forwards;}

forwardsを追記したら思うように表示されました！

投稿2021/06/08 13:28

ccon

総合スコア8

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

CSSのスライドで画像が透明になってしまう

関連した質問