CSSアニメーションで全画面表示の背景画像を切り替える方法

はじめに

これまでWEBサイトで動きをつけるためには、JavascriptやjQueryがよく使われてきましたが、事情が変化してきました。

スマホからのアクセスが激増し、それらはcss3アニメーションのプロパティにほぼ対応しています。また、animationプロパティ未対応だったIE9のサポートが終了したことも、変化を後押ししています。

たとえばスライドショーといえばjQueryが定番でしたが、CSSアニメーションでかなり簡単に実装できてしまいます。むしろ、回線への負荷を考えるとCSSアニメーションを使った方がいい場合も多いでしょう。そうしたことを考えると、今後JavascriptとCSSだけで動きをつける流れも多くなってくると思います。

さて、でもいざ実装しようとすると、最初はとっつきにくく感じるかもしれません。
そこでこのエントリでは、ヘッダーイメージといわず全画面表示の背景画像をCSSアニメーションで切り替える方法を 実例をあげながらできるだけわかりやすく説明していきます。

読み終わったときに、自分も使ってみようかなと思ってもらえれば幸いです!

実例サイト

ゼロ地点



これは、今現在6枚の写真を順番に ease-in ease-outさせながら、少し大きくして動きを見せる作りになっています。

では、すこしずつ解説していきましょう。

CSSアニメーションがわかりにくく感じる理由

コード説明の前に…

CSSアニメーションは、最初ちょっととっつきにくく感じるかもしれません。
その理由は、主に2種類の要素で構成されている(上例では画像も使用しているので3種類に見えますが、後日別のエントリでくわしく解説します)からかもしれません。
その主な2種類とは…

  1. アニメーションについて記述するスタイル
  2. アニメーションの始めと終わり(またはそのあいだの通過点)のスタイルを示すキーフレーム

えっ、キーフレーム?

キーフレームとは?

キーフレームとは、動画作成でよく使われる言葉ですが、

キーフレームとは、CGのアニメーションの中で主となる変化が定義されているフレームのことである。 物体の形や位置の変化ポイントが指定され、その間を補完することで滑らかな動画像が作成される。weblio

上の説明にはCGのアニメーションとありますが、CSSアニメーションも同じです。
つまり、CSS Animationは、アニメーションに関する詳細設定と、キーフレームの設定を行って動きを表現する仕組みになっています。

設定に関する細かな説明は後日また書きたいと思います。今日は実装イメージとコードをざっくりと見ていきましょう。

CSSアニメーションのコード解説

上の実例サイトのコードは下記のようになっています。

HTML

画像が入るのはul下のliです。
front-imgというクラスのulに、6つのliを入れています。

ULに関するCSS

positionfixedで、width: 100%;height: 100%;です。

LIに関するCSS

positionabsoluteで、width: 100%;height: 100%;background-size: cover;によって、画像を全画面に表示させます。animation: front-anime 42s linear infinite 0s;は、front-animeという名前の42秒42sのアニメーションをlinearな動きで遅延時間0sで無限に繰り返します。

細かなところは置いておいて、このアニメーションの部分のキモを説明しておきます。

ここでは、写真1枚につき、アニメーションさせる間隔を7秒と設定しています。なので、7秒ずつずらしてアニメーションを開始させています。最初の写真.front-img li:nth-child(1) は0秒遅れanimation-delay: 0s;で開始し、2枚めの写真は7秒遅れanimation-delay: 7s;、3枚めは14秒遅れ…といった設定をしていきます。

上の.front-img liのコードにおいて、animation: front-anime 42s linear infinite 0s;でなぜ42秒42sのアニメーションかというと、最後の写真が35秒遅れanimation-delay: 35s;ではじまって7秒間続くと42秒になるからです。

次にキーフレームの説明です。

front-animeという名前のキーフレーム@keyframes0%から100%まで描写されています。

7秒間隔のアニメーションが6枚あるので、1サイクル42秒(7s*6=42s)続くことになります。一つ目のアニメーションの位置を計算すると、7sec/42sec=0.1666、つまり全体の16%くらいで完了させたいと考えます。なので、最初は0%からゆっくりとease-inさせ(animation-timing-function: ease-in;)、8%までopacity: 0;からopacity: 1;までもっていきます。また、1.01倍に拡大(transform: scale(1.01);)させます。そして、8%から16%までに1.02倍に拡大(transform: scale(1.02);)させながらanimation-timing-function: ease-out;を開始させます。そこから25%までにさらに拡大させながら(transform: scale(1.1);)透明度も0にもってくる(opacity: 0;)わけですが、16%あたりから25%までの部分は、次のアニメーションとかぶっているわけです。

写真の実装枚数が違う場合、上のような計算で、滑らかな動きになるよう調整してやります。

注意点

IE10とIE11は、CSS keyframeのブロックがメディアクエリーのなかにある場合に機能しません。keyframeのブロックをメディアクエリーの外に出して定義してやる必要があります。

実例は実際にIE11などでこちらにアクセスして確認してみてください。

ベンダープレフィックス

ちなみに、ベンダープレフィックスの-webkit-に関してですが、現ブラウザはCSSアニメーションにほぼ対応していますが、以前のAndroidとiOSのために記述を加えています。


Can I use