CSSのアニメーションを用いた画像のフェード切り替えを理解する

スライドショーのように画像が切り替わる仕組みはJavaScriptのライブラリが多くありますが、単純なものであればCSSのみで実装出来るようです。

自分なりに調べて見つけたサイトがこちら。

CSSで背景画像をフェードインして切り替える

https://webparts.cman.jp/box/bgfade/

ただ、自分が実装しようとしているサイトでは画像の枚数が3枚であり、上記のソースコードを流用したところ不自然なアニメーションとなってしまいました。

今回は、CSSのアニメーションを用いた画像のフェードによる切り替え方法について、理解すべき事をまとめておきます。

アニメーションのキーフレーム分割

キーフレームとは、アニメーションにおける区切りです。区切りを多くするほど複雑な変化をさせる事が出来ます。

アニメーション全体のキーフレームは100%になりますので、複数の要素をそれぞれアニメーションさせて一連のアニメーションとする場合は、全体を要素数で割ることによってキーフレームを分割します。

例えば、4枚の画像をそれぞれフェードイン・フェードアウトで切り替えたい場合、
100% / 4 = 25%
つまり、この25%というのが分岐点になります。先述した”不自然なアニメーション”というのは、この分岐点が4枚分の場合の設定になっていたからでした。

不透明度が0から始まって100に到達して再度0に戻るというアニメーションは、CSSでは下記のように記述します。

@keyframes fade_anime {
   0% { opacity: 0; }
  25% { opacity: 1; }
 100% { opacity: 0; }
}

ただ、上記のような大雑把な区切りだと、変化も同じく大雑把なものになりますので、0%から分岐点と分岐点から100%までの間に設定を追加して調整します。

例えば、素早く不透明度を上げたければ下記のような設定になります。

   0% { opacity: 0; }
  10% { opacity: 1; }
  25% { opacity: 1; }
  :

アニメーション開始の遅延設定

各要素に同じアニメーションを設定して再生を開始すると、同時にアニメーションが再生されるので、フェードで画像を順次切り替えるといった動きになりません。このような場合は要素の1つ目以降の要素に対してアニメーション開始遅延時間を指定します。指定する時間は、各要素のアニメーションにかける時間×再生順番となります。

例えば、4枚の画像に対してそれぞれ1枚あたりの再生が5秒かかるというアニメーションは、CSSでは下記のように各画像にクラスを付けてそれぞれ記述します。

img.img1{animation-duration: 0s;}
img.img2{animation-duration: 5s;}
img.img3{animation-duration: 10s;}
img.img4{animation-duration: 15s;}

全体のアニメーション設定

アニメーション時間は
1枚あたりにかける再生時間×要素数
つまり、4枚を5秒ずつ再生する場合は20秒となります。

また、アニメーションのキーフレーム名と、初期不透明度0を指定します。

以上を踏まえてCSSでは下記のように記述します。

img {
  animation-duration: 20s;
  animation-name: fade_anime;
  animation-iteration-count: infinite; /* 再生回数無限 */
  opacity: 0;
}

アニメーションの状態変化を視覚的に知る

下記は、3枚の画像を5秒ずつフェードで切り替える全体で15秒のアニメーションの挙動を、開発者ツールで確認した際のスクリーンショットです。上から順に1枚目・2枚目・3枚目の再生状態とプロパティの変化を示しています。



これらを見ると、不透明度の変化のアニメーションは同じでも、その再生開始時間が2枚目と3枚目は5秒と10秒ズレているのが分かります。また、全体で15秒のアニメーションといっても、それぞれに15秒ずつ時間が割り当てられており、表面的な見た目として15秒になっているという事が分かります。

下記は3枚目の画像の再生開始前の状態です。再生開始前なので、当然ですが不透明度が変化するアニメーションも開始していません。

このように、開発者ツールを使うとアニメーションがどのように再生されているのかを視覚的に知る事が出来、期待した動きにならない問題等の解決に役立ちます。

スポンサーリンク
スポンサーリンク

フォローする