CSS 3のアニメーション機能「Animations」

　CSS 3のアニメーション機能には「Transitions」と「Animations」の2種類がある。前回は「Transitions」を紹介したが、今回は「Animations」の機能を紹介したい。

　AnimationsはW3Cの草案（Working Draft）「CSS Animations Module」として提案されており、現在のところSafari 4とGoogle Chrome 2以上が対応している。また、Firefoxはバージョン3.5では未対応となっているが、将来的なバージョンでのサポートを予定している。

キーフレームで背景色を細かく変化させる

　AnimationsではTransitionsと同じように、CSSのプロパティ値を変化させることでアニメーションを作成する。このとき、Transitionsでは始点と終点の値しか指定することができなかったが、Animationsではキーフレームを利用して始点と終点以外にも値を指定し、細かな動きを設定できるようになっている。

　たとえば、次のサンプルでは<div>で構成したボックスにカーソルを重ねると、キーフレームの設定により背景色が赤色（red）→紺色（darkblue）→黄色（yellow）→赤色（red） と変化する。

サンプル1：カーソルを重ねると背景色が滑らかに変化する（画像をクリックすると拡大します）

サンプル1：カーソルを重ねると背景色が滑らかに変化する（画像をクリックすると拡大します）

サンプル1：カーソルを重ねると背景色が滑らかに変化する（画像をクリックすると拡大します）

サンプル1：カーソルを重ねると背景色が滑らかに変化する（画像をクリックすると拡大します）

サンプル1：カーソルを重ねると背景色が滑らかに変化する（画像をクリックすると拡大します）

サンプル1：カーソルを重ねると背景色が滑らかに変化する（画像をクリックすると拡大します）

@-webkit-keyframes mycolor {

	0%	{
	        background-color: red;
		}

	40%	{
		background-color: darkblue;
		}

	70%	{
		background-color: yellow;
		}

	100%	{
		background-color: red;
		}

	}

div:hover	{
       -webkit-animation-name: mycolor;
       -webkit-animation-duration: 5s;
       -webkit-animation-timing-function: linear;
	}

<div>こんにちは</div>

※ブラウザで表示を確認する

　アニメーションの設定を行うにはまず、@-webkit-keyframesでキーフレームを作成する。@-webkit-keyframesの記述形式は次のようになっており、サンプル1ではキーフレーム名を「mycolor」と指定している。

@-webkit-keyframes キーフレーム名 {〜}

　@-webkit-keyframesの中にはキーフレームの各ポイントの設定を記述する。始点の設定は0% {〜}に、終点の設定は100% {〜}に記述し、必要に応じて1〜99%のポイントを追加する。サンプルでは40%と70%の2つのポイントを追加している。

　各ポイントには値を変化させたいプロパティの設定を記述する。サンプルでは背景色の値を変化させたいのでbackground-colorプロパティの設定を記述している。これでキーフレームの設定は完了だ。

　次に、キーフレームの設定の適用先を指定する。サンプルでは<div>にカーソルを重ねたときにアニメーションを実行したいので、div:hover {〜}に-webkit-animation-nameプロパティを追加して、適用するキーフレーム名を「mycolor」と指定する。

　あとはアニメーションに関する細かな設定を行う。-webkit-animation-durationではプロパティの値を変化させる時間を、-webkit-animation-timing-functionではキーフレーム間の補間方法を指定する。サンプルではそれぞれ「5s」「linear」と指定して、5秒の間に一定のスピードで背景色が変化するように指定している。

複数のプロパティを同時に変化させるアニメーション