CSSのみで画像が切り替わるアニメーションを発生させたいです

javascriptなどは使わずCSSのみで、３枚の画像をフェードイン、フェードアウトで画像が切り替わるスライドショーを作成したいです。具体的には、一枚の画像につき0.8秒表示させたいと思っております。

html
1    <div class="main_contents">
2        <div class="slide_wrapper">
3            <div class="slide_animation slide_animation_1">
4                <img src="img/shop_img1.webp">
5            </div>
6            <div class="slide_animation slide_animation_2">
7                <img src="img/shop_img2.webp">
8            </div>
9            <div class="slide_animation     slide_animation_3">
10                <img src="img/shop_img3.webp">
11            </div>
12        </div>
13    </div>
14</body>
15
16</html>

css
1.slide_wrapper{
2    height:720px;
3    width:1280px;
4    max-width:100%;
5    position:relative;
6
7}
8.slide_animation{
9    animation-name:slide;
10    animation-duration:2.4s;
11    animation-iteration-count:infinite;
12    opacity:1;
13    position:absolute;
14    
15}
16
17@keyframes slide {   
18    0%{opacity:1}
19    33%{opacity:0}
20}
21.slide_animation_1{
22    animation: delay 0s;
23
24}
25.slide_animation_2{
26    animation: delay 1s;
27
28}
29.slide_animation_3{
30    animation: delay 2s;
31
32}

上記のコードはアニメーションを適用させる箇所を抜粋したコードになります。
各画像のアニメーションのスタート時間を0.8秒ずつ遅らせ「@keyframes」も３分の一経過したら、画像が透明になるように指定してみたのですが、画像が切り替わることすら起こりませんでした。
どのようにしたら、アニメーションを発生させることができるのでしょうか？

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

回答3件

ベストアンサー

CSS
1    /*animation: delay 0s;*/
2    animation-delay: 0s;

投稿2018/11/12 06:18

x_x

総合スコア13749

newyee

2018/11/12 08:19

ありがとうございます。修正したら、アニメーションが適用されました。

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

画像もcssも一つにまとめたほうが分かりやすいかもしれませんね。
「nth-of-type()」は、「n番目の要素」を指定する擬似クラスです。
誤字がなければアニメーションが発生しているのが見えるかと思うので、
「@keyframes」は少しづつ調節しながら感覚を掴んでいくといいと思います。

lang
1
2              <div class="slide_animation">
3                  <img src="img/shop_img1.webp">
4                  <img src="img/shop_img2.webp">
5                  <img src="img/shop_img3.webp">
6              </div>
7

lang
1
2.slide_animation img:nth-of-type(1) {
3    animation-delay: 0s;
4}
5.slide_animation img:nth-of-type(2) {
6    animation-delay: 0.8s;
7}
8.slide_animation img:nth-of-type(3) {
9    animation-delay: 1.6s;
10}