CSS3のkeyframesルールを使って簡単なアニメーションを試してみた

表題の通りにCSS3に実装される予定のアニメーション関連ですが、今のうちに勉強しとこうと思い軽く試してみました。

ボックスの背景色を変化させる

ためしてみたのが下記です。ボックスの背景色が虹色っぽく変化します。

Sample Text

ちなみにHTMLは下記のようになっています。

<div id="smp">
<p>Sample Text</p>
</div>

使用したCSS3のプロパティなど

@keyframes
アニメーションを動作させるためのキーフレーム設定
@keyframes keyname{
	from { CSSプロパティ: 値; } /* 開始(0%でも良い) */

	to { CSSプロパティ: 値; } /* 終了(100%でも良い) */
}
animation-name
@keyframesでのキーフレーム名を指定
@keyframes hoge{
	from { CSSプロパティ: 値; } 
	to { CSSプロパティ: 値; } 
}

#smp{
	animation-name: hoge;
}
animation-duration
アニメーションの時間を指定。s(秒)または、 ms(ミリ秒)が指定できる。
@keyframes hoge{
	from { CSSプロパティ: 値; } 
	to { CSSプロパティ: 値; } 
}

#smp{
	animation-name: hoge;
	animation-duration: 10s;
}
animation-iteration-count
アニメーションの繰り返し回数を指定。数値または、infinite(無限)が指定できます。
@keyframes hoge{
	from { CSSプロパティ: 値; } 
	to { CSSプロパティ: 値; } 
}

#smp{
	animation-name: hoge;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}

これらのプロパティは現段階(2010年12月17日)では、WebKit系のブラウザでしかサポートされていませんので、下記のようにベンダープレフィックスを付けて記述します。

@-webkit-keyframes rainbow{

	from{ background: #e71039;}

	18%{ background: #fa6d04;}

	36%{ background: #f2cd0b;}

	54%{ background: #bdb829;}

	72%{ background: #476cf1;}

	90%{ background: #4418a1;}

	to{ background: #906181;}
}

#smp{
	-webkit-animation-name: rainbow;
	-webkit-animation-duration: 10s;
	-webkit-animation-iteration-count: infinite;
	width: 300px;
	height: 200px;
	text-align: center;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
}

#smp p{
	line-height: 200px;
}