【HTML/CSS】CSSのみで画像切り替えのアニメーションを実装する方法

投稿日:

プログラミング初心者の勉強ブログ #130

ここ最近何回か連続でCSSでの画像切り替えアニメーションについて質問を受けたので、改めて記事にしてみる。JS使わなくてもCSSアニメーションのみである程度実装できるのでその方法をまとめる。以前記事にしたような気もするが、CSS系の記事は結構読まれる傾向にあるのでもう一度書こうと思う。

 

目次

 

画像の表示切り替えをCSSアニメーションのみで実装する

画像切り替えアニメーション

イメージは上のgifのようにふわっと画像を切り替えるようなもの。内容としてはkeyframesで作成したアニメーションをCSSアニメーションプロパティでずらして適用させる感じ。

 

実装の流れ

実装の流れを簡単に説明すると、

  1. HTMLのimgタグで画像をコーディング
  2. 最初に表示させる画像以外は、あらかじめ全てCSSで「opacity: 0;」にする
  3. CSSのkeyframesで、opacityを「1→0」、「0→1」に変化させるアニメーションを作る
  4. CSSのanimationプロパティで、3で作成したkeyframesをタイミングよく設定する

このような流れ。JS使わないと画像の切り替えアニメーションはできないのかな、と当時は思っていたりしたが、そんなことはなかった。

 

※opacityとは、透明度のことを表す。0だと完全に透明になって表示されなくなる。

※keyframesを使うと、CSSでアニメーションを作成できる。下記コード参照。

 

 

 

 

実際のコード

gifでは2枚の画像の切り替えのみ写っているが、本来は4まいの画像を切り替えて表示させている。

実際のサイトurl:https://gslab0707.bob-pop.com/cheese_academy/

この実装のコードを載せていく。(リンクが切れてしまっていたらすみません。)

 

※keyframesのコード、画像に当てたcssのコード、HTMLのコードと3つに分けて掲載。

 

keyframes部分のcss

 

keyframesではopacityの操作のみ。特に難しい設定はない。強いて言えば透明度の変化のタイミングを自分で微調整する点が難しい。僕の場合はある程度のアニメーションで良しとして行なっているため、プロからしてみれば甘いとか言われそう。

 

 

画像に当てているcss

 

とにかくアニメーションを当てるタイミングをずらす、それだけ。keyframesと同様に微調整が難しいポイント。

 

画像部分のHTML

 

 

まとめ

僕のブログの中の記事で結構読まれているのが、

【JavaScript】とても簡単なハンバーガーメニューの作り方をわかりやすく解説

とか

【画像アップロード】file_fieldデザイン変更+画像選択時にプレビュー表示する方法

とかだ。どちらもWebサイトの見た目に関係したCSSやJSの実装内容のもの。どうやらここら辺の関係はアクセスされるらしい。

確かにどちらも実装の手間だけでなく、blog用に資料を作成したりと投稿に手間をかけているものである。SEOキーワードとかあまり考えて投稿していないが、もしかしたら競合がいなかったからかもしれない。ただ、なんとなく思うのが、どちらも調べていてピンポイントな回答をしてくれる記事がなかったことだ。だからこそアクセスが伸びているのかもしれない。

「とても簡単なハンバーガーメニュー の作り方をわかりやすく解説」のタイトルはなんの根拠もなく「わかりやすく」とかつけているので、自分の中では大げさでタイトル命名をためらった覚えがある。けどそんくらいでちょうどいいのかもしれんなと。

以上ありがとうございました。

-プログラミング学習
-,

Copyright© s u p ? , 2019 All Rights Reserved.