【CSS】時間で背景色を変化させるアニメーションをCSSだけで作る

webサイトのコンセプトで時間により背景を変えたいなんて事もあるかもしれません。
今回はCSSアニメーションを使って時間が経つと色が変わる背景を作ってみたいと思います。

1 背景変化のイメージ動画
2 CSSコードの紹介
3 CSSコードの解説
4 プロパティを一つずつ書く場合と省略した場合
5 animationプロパティのご紹介
6 まとめ
7 CSSコーディングのオススメ本

背景変化のイメージ動画

背景が時間によって変わるイメージはこんな感じです。

CSSコードの紹介

以下のCSSコードを作成します。

CSS

body
{
　animation: bgcolor 5s infinite;
}
	
@keyframes bgcolor
{
　0% { background-color: #558abb; }
　20% { background-color: #c7cc62; }
　40% { background-color: #ec9260; }
　60% { background-color: #9f5cc8; }
　80% { background-color: #c85c89; }
　100% { background-color: #558abb; }
}

今回はbody全体を範囲とする為、特別htmlの記述はありません。
CSSのみの設定となります。

CSSコードの解説

アニメーションのプロパティコード

body
{
　animation: bgcolor 5s infinite;
}

アニメーションのプロパティコードはbodyの中に記述します。
例では以下の様に設定しています。

bgcolor・・・任意で定義した名前（animation-name）
5s・・・5秒でアニメーションを1回再生（animation-duration）
infinite・・・無限ループ（animation-iteration-count）

背景の色を設定

@keyframes bgcolor
{
　0% { background-color: #558abb; }
　20% { background-color: #c7cc62; }
　40% { background-color: #ec9260; }
　60% { background-color: #9f5cc8; }
　80% { background-color: #c85c89; }
　100% { background-color: #558abb; }
}

0％～100％で色を設定します。
設定された色は再生時間内で1回で再生されます。
5色を設定して5秒で再生するなら、1色1秒という事になります。

「@keyframes」設定は忘れずに

@keyframes 定義した名前
{

}

@keyframes設定をしていないとアニメーションは再生されません。
例では「bgcolor」という名前を設定しているので「@keyframes bgcolor」という記述になります。

プロパティを一つずつ書く場合と省略した場合

上記のCSSは実は省略した書き方になっています。
実際にプロパティを一つずつ書いていくととっても長くなってしまう為、省略した書き方になっています。

省略しない書き方

body
{
　animation-name: bgcolor;
　animation-duration: 5s;
　animation-iteration-count: infinite;
}

省略した書き方

body
{
　animation: bgcolor 5s infinite;
}

両方とも同じアニメーションが再生されます。
プロパティを細かく設定すると行数が増えるので、省略した書き方をした方がスッキリしたコードになります。

animationプロパティのご紹介

必須の定義「animation-name」

body
{
　animation-name: 定義する名前;
}

アニメーション名を任意で指定します。
ここで設定した名前を「@keyframes」に設定する事でアニメーションは実行されます。

再生時間を設定する「animation-duration」

body
{
　animation-duration: 5s;
}

「animation-duration」はアニメーションが開始してから終わるまでの時間設定です。
「秒数＋s」と記述する事で設定する事ができ、「5s」なら5秒、「100s」なら100秒となります。

速度を指定する「animation-timing-function」

body
{
　animation-timing-function: ease;
}

「animation-timing-function」はアニメーションの速度・進行度を指定します。
一定のスピードではなく、後半スピードが増したり、滑らかな動きにしたりと色々な設定をする事ができます。

ease・・・開始と終了を滑らかにします。（初期値）
ease-in・・・アニメーションがゆっくり始まります。
ease-out・・・アニメーションがゆっくり終わります。
ease-in-out・・アニメーションが始まり、ゆっくり終わります。
linear・・・一定の速度で再生されます。
steps(ステップ数,タイミング)・・・ステップ数で段階的に色を変化させる。
step-start・・・開始時点で終了状態へ。
step-end・・・終了時点で終了状態へ。

stepsの説明

「steps」はステップ数とタイミング（startかend）を設定する事で、段階的にカクカクと色を変更していきます。

@keyframes 定義した名前
{
　animation-timing-function: steps(5,start);
]

この設定例だと「5ステップ」で色が変わり、変わるタイミングは各ステップの最初からとなります。
startをendにするとタイミングは各ステップの最後からとなります。

開始までの秒数設定ができる「animation-delay」

body
{
　animation-delay: 1s;
}

「animation-delay」は読み込まれてからアニメーションが開始するまでの秒数を指定できます。
「1s」と設定した場合は要素が読み込まれてから1秒後にアニメーションがスタートします。

繰り返し回数を指定する「animation-iteration-count」

body
{
　animation-iteration-count: infinite;
}

「animation-iteration-count」はアニメーションの繰り返し回数を指定できます。
「infinite」は無限ループ、「数字」は繰り返したい数になります。

再生方向を指定する「animation-direction」

body
{
　animation-direction: normal;
}

「animation-direction」はアニメーションが再生される方向を指定する事ができます。
設定した通りに再生（順再生）するか逆再生するなどを指定する事ができます。

normal・・・普通再生（順再生）
reverse・・・逆再生
alternate・・・順再生と逆再生の繰り返し
alternate-reverse・・・逆再生と順再生の繰り返し

実行後の状態を指定できる「animation-fill-mode」

body
{
　animation-fill-mode: normal;
}

「animation-fill-mode」はアニメーション実行後の状態を指定する事ができます。

none・・・何も起きません（初期値）
forwards・・・最後のフレームでアニメーションが止まります。
backwards・・・再生前に最初のキーフレームの状態を適用します。
both・・・forwardsとbackwardsの両方を適用します。

backwardsとbothはイマイチよく分かりません（笑）

再生・停止を指定する「animation-play-state」

body
{
　animation-play-state: running;
}

「animation-play-state」はアニメーションの再生・停止状態を指定する事ができおます。
読み込ませた時にアニメーションを再生させるのか停止状態にするのかを指定する事ができるのですが、必要になる事案が思いつきません。。。
停止させておきたいなら単純なbackground-colorでいいので。。。

running・・・再生中
paused・・・一時停止

まとめ

あまり激しい色変化は目が痛くなりますが、雰囲気にあった色替えは素敵なデザインになりますね。
色だけじゃなく画像を使った時間経過を表現するなんてデザインもありかもしれません。

CSSコーディングのオススメ本

CSS辞典第5版 [CSS2/3/4対応]

本書は、Webデザインに必須の技術「CSS」の文法リファレンスです。大幅改訂となる第5版は、現時点の最新状況を反映し、Web制作を学ぶなら必ず押さえておきたい基本のCSS2.1、仕様の策定とブラウザでの実装が進められているCSS3、さらにはその次の規格であるCSS4(Level4モジュール)まで掲載しています。