質問: CSSのみでアニメーションを作成したいのですが、うまくいきません... コードの方は長い為、codepenの方へ上げさせていただきました。 codepenのリンクになります 上記のリンクのコードの、クラス「slide_animation」に適用しているアニメーションなのですが、3枚の画像をスライドショーのように切り替えたいのですが、きちんと表示されているのは一枚のみで、後の2枚はうっすらぼやけて写ってしまっています。 どのようにすれば、3枚ともハッキリと表示させることができるでしょうか? ご回答いただけましたら幸いです。よろしくお願いします。
回答: CSSアニメーションの設定が、3枚でうまくずれてループできるように調整されていないようです。 下記を差し替えてみてください。 ``` ... .slide_wrapper{ height:720px; width:1280px; max-width:100%; position:relative; } .slide_animation{ animation-name:slide; animation-duration:2.4s; animation-iteration-count:infinite; opacity:1; position:absolute; } @keyframes slide{ 0%{opacity:1;} 33.33333%{opacity:0;} 66.66666%{opacity:0;} 100%{opacity:1;} } .slide_animation_1{ animation-delay:0s; } .slide_animation_2{ animation-delay:0.8s; } .slide_animation_3{ animation-delay:1.6s; } ``` 追記(2018/11/12) 画像3枚のアニメーションをいっぺんに考えると難しいかもしれません。 各画像のアニメーションは、 1. `opacity: 1`からスタート(0%) 2. `opacity: 0`までフェードアウト(~33.33333%) 3. `opacity: 0`のままキープ(~66.66666%) 4. `opacity: 1`に戻る(~100%) 5. 1.に戻る という繰り返しです。 33.3333%から100%にかけて徐々にフェードインしてくると他の画像とかぶってしまいます。 そのため、66.6666%まで`opacity: 0`のままキープします。 2,3枚目も同じ動きですが、`animation-delay`でスタート秒数がずれます。 結果として、3枚の画像が交互に出現するように見えます。 ### opacityの変化略図 「1ーーー0ーーー0ーーー1」が上記の1~5のステップです。 (繰り返しの終わりと開始は、ひとつにまとめています。) 画像1: 1ーーー0ーーー0ーーー1ーーー0ーーー0... 画像2: ーーーー1ーーー0ーーー0ーーー1ーーー0ーーー0... 画像3: ーーーーーーーー1ーーー0ーーー0ーーー1ーーー0ーーー0...