CSSのみでアニメーションする背景を作る方法

2015.2.20 (金)
main_catch

CSSのみで雪が降るアニメーション背景を作る方法

今回はCSS3のみを使い、雪が降る背景の作成の仕方をご紹介します。参考にさせて頂いたのはコチラの海外サイトです。今回の記事はCSS3のアニメーション等をフルに活用するのでIE9以下は動作しませんのであしからず・・・。 完成サンプルはコチラ!!

まずは降らせる雪の透過ピングを作成、または下記のサンプルからダウンロードされて下さい。

サイズ:500×500
サイズ:400×400
サイズ:300×300

ダウンロードされる方は、それぞれの画像の上で「右クリック」から「画像の保存」でダウンロード出来ます。(※サイズが見た感じ全部同じに見えるのは、とりあえず表示様にそうしているだけです。)一枚の画像でも、雪を降らせることは可能ですが三枚の画像を使うことで奥行き等が表現できますのでオススメです。

<body>に背景画像を設定する

body {
background-color: #6b92b9;
background-image: url(‘snow1.png’), url(‘snow2.png’), url(‘snow3.png’);
}

CSS3では背景画像を複数設定する事が可能になりました。「一番上:snow1.png」→「二番目:snow2.png」→「一番下:snow3.png」と左から順番の重なりになります。

animationの設定

body {
background-color: #6b92b9;
background-image: url(‘snow1.png’), url(‘snow2.png’), url(‘snow3.png’);
animation: snow 20s linear infinite;
}

CSS3のanimationを使用するには「animationプロパティ」でアニメーションさせたい要素にアニメーションの定義を記述しその後で、「@keyframes」でアニメーションの詳細を設定します。

上記の記述の意味としては・・・

■アニメーションの名前は「snow」
■一回のアニメーションが終了するまでに掛かる時間は「20s(秒)」
■アニメーションのタイミングや進め方は「linear(一定)」
■アニメーションの繰り返しは「無限」

となります。

keyframesの設定

@keyframes snow {
0% {background-position: 0 0, 0 0, 0 0;}
100% {background-position: 500px 500px, 300px 300px, 400px 400px;}
}

上記解説です。@keyframesの後に半角スペースを空けてanimationプロパティで設定した名前(今回の場合snow)を指定します。トドのつまり、この@keyframesの設定はanimationで「snow」と命名されたanimationプロパティの設定となります。

次に「~%」ですが、

■0%がアニメーションの開始時の設定。
■100%がアニメーションの終了時の設定となります。

0%(開始)の時はbackground-positionは3枚の背景画像全て表示位置は「0 0」=左上
100%(終了)の時はそれぞれの画像サイズ分だけ右下に表示となります。

一連の動作をまとめると、「snow」と命名したアニメーションは20秒掛けて一定の速度で背景画像が左上から右下にエンドレスで移動する。という事になります。

ベンダープレフィックスを付けて各ブラウザ対応させる

animationと@keyframesの設定だけでは各ブラウザで雪がアニメーションしません。これだけの記述で動いた人は、IE10以降かfirefoxを使用されている方だと思います。webkit系のchromeやsafariの方は動いていないはずです。各主要ブラウザに対応させる為、それぞれのベンダープレフィックスを付けてあげましょう。

body {
background-color: #6b92b9;
background-image: url(‘../img/snow.png’), url(‘../img/snow2.png’), url(‘../img/snow3.png’);
-webkit-animation: snow 20s linear infinite;/*chrome&safari*/
-moz-animation: snow 20s linear infinite;/*firefox*/
-ms-animation: snow 20s linear infinite;/*ie*/
animation: snow 20s linear infinite;
}

@keyframes snow {
0% {background-position: 0 0, 0 0, 0 0;}
100% {background-position: 500px 500px, 300px 300px, 400px 400px;}
}
/*chrome&safari*/
@-webkit-keyframes snow {
0% {background-position: 0 0, 0 0, 0 0;}
100% {background-position: 500px 500px, 300px 300px, 400px 400px;}
}
/*firefox*/
@-moz-keyframes snow {
0% {background-position: 0 0, 0 0, 0 0;}
100% {background-position: 500px 500px, 300px 300px, 400px 400px;}
}
/*ie*/
@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 500px, 300px 300px, 400px 400px;}
}

正直な所、firefoxとIEはベンダープレフィックス無くても問題無いです。ただ、過去のverではベンダープレフィックスが無いと動かない場合もあるかと思いますので、「おまじない」の気持ちで記述しておいても良いと思います。CSS3はとても便利で助かりますが、モダンブラウザのみが対応しているという欠点がありますのでPCサイトとして気軽に使用出来ない点が問題ですね・・・。

スマートフォンサイトであれば問題なく使用できるので、気兼ねなくPCサイトにCSS3を使用するにはまだ数年掛かりそうですね。完成サンプルはコチラ!!

ニワカソフトではホームページを作成する際、お客様のご依頼にマッチした制作を行っております。例えばスマートフォンサイトを作成したいという案件であれば今回のような手法を使用し、よりリッチで見栄えの良いホームページをご提供させて頂いております。ホームページのリニューアルや新規立ち上げ等、ぜひニワカソフトにおまかせ下さい!!