CSSアニメーションがうまくいきません...

CSSのみでアニメーションを作成したいのですが、うまくいきません...
コードの方は長い為、codepenの方へ上げさせていただきました。
codepenのリンクになります
上記のリンクのコードの、クラス「slide_animation」に適用しているアニメーションなのですが、３枚の画像をスライドショーのように切り替えたいのですが、きちんと表示されているのは一枚のみで、後の２枚はうっすらぼやけて写ってしまっています。
どのようにすれば、３枚ともハッキリと表示させることができるでしょうか？
ご回答いただけましたら幸いです。よろしくお願いします。

yambejp

2018/11/12 08:56

画像のアップ先、質が悪そうです。「http://placehold.jp/」あたりでダミーを指定したほうがよいでしょう

x_x

2018/11/12 08:56

前回の質問の続きのようですが、ちゃんと確認したほうがいいです。コロン抜けてるので

newyee

2018/11/12 10:06

ご指摘ありがとうございます。「コロン」の件修正しました。

newyee

2018/11/12 10:07

画像のの方は「dropbox」でアップしているのですが、画像が荒いということでしょうか...?貼ってい頂いたリンク見てみます。

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

回答1件

ベストアンサー

CSSアニメーションの設定が、3枚でうまくずれてループできるように調整されていないようです。
下記を差し替えてみてください。

CSS
1...
2.slide_wrapper{
3    height:720px;
4    width:1280px;
5    max-width:100%;
6    position:relative;
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@keyframes slide{
16    0%{opacity:1;}
17    33.33333%{opacity:0;}
18    66.66666%{opacity:0;}
19    100%{opacity:1;}
20}
21.slide_animation_1{
22    animation-delay:0s;
23}
24.slide_animation_2{
25    animation-delay:0.8s;
26}
27.slide_animation_3{
28    animation-delay:1.6s;
29}

追記(2018/11/12)

画像3枚のアニメーションをいっぺんに考えると難しいかもしれません。
各画像のアニメーションは、

opacity: 1からスタート(0%)
opacity: 0までフェードアウト(~33.33333%)
opacity: 0のままキープ(~66.66666%)
opacity: 1に戻る(~100%)
1.に戻る

という繰り返しです。

33.3333%から100%にかけて徐々にフェードインしてくると他の画像とかぶってしまいます。
そのため、66.6666%までopacity: 0のままキープします。

2,3枚目も同じ動きですが、animation-delayでスタート秒数がずれます。
結果として、3枚の画像が交互に出現するように見えます。

opacityの変化略図

「１ーーー０ーーー０ーーー１」が上記の1~5のステップです。
(繰り返しの終わりと開始は、ひとつにまとめています。)

画像1: １ーーー０ーーー０ーーー１ーーー０ーーー０...
画像2: ーーーー１ーーー０ーーー０ーーー１ーーー０ーーー０...
画像3: ーーーーーーーー１ーーー０ーーー０ーーー１ーーー０ーーー０...

投稿2018/11/12 08:59

編集2018/11/12 10:58

NozomuIkuta

総合スコア1260

newyee

2018/11/12 10:02

ご回答ありがとうございます。ご回答下さいましたように、修正しましたら、３枚ともきちんとスライドさせることができました。 @keyframesに関しましては、なかなかコツが掴めず理解できずにいるといった状況なのですが、何故、33%の時点で「opacity」に「０」を指定しているにも関わらず、66%の時点でも「0」を指定する必要があるのでしょうか？また、100%の際にも「opacity」を「1」に戻す理由が分からないです... 重ね重ね申し訳ないのですが、教えて頂けましたら幸いです。