最近、HTML5やらCSS3やらを再び勉強していまして、その辺のネタを少し。今回ご紹介するのはCSSを使用したアニメーション。実はお恥ずかしながら、最近までCSSでアニメーションが出来るなんて知らなかったんですorz おかげで、成功したときはめちゃくちゃ感激しましたｗ

まずはサンプルから。右から左へスライドインするアニメーションです。サンプルでは分かりやすくするため、無限ループをかけてます。また見栄えのためdiv要素ではなくspan要素に変更していますので、あしからず。

Hello World!!

続いてソースコード。

@keyframes anime1 {
	from
	{
		left: 300px;
		opacity: 0.0;
	}
	to
	{
		left: 0px;
		opacity: 1.0
	}
}

#test1 {
	 position: relative;

	 animation-name: anime1;
	 animation-duration: 3s;
}

<div id="test1">Hello World!!</div>

keyframeのfromでアニメーション前のCSSの状態、toでアニメーション後のCSSの状態を記述します。それをアニメーションしたい要素にanimation-nameとしてリンクさせます。animation-durationはアニメーションの開始から終了までの所要時間です。書き方がVRML（古っ！）に似ていますね－。

ただしkeyframes、animation-name、animation-durationの前にはプレフィックス「-webkit-」「-o-」「-moz-」「-ms-」が必要な場合があります。2013年1月最新版のIE10、Firefox18では不要、Chrome24では必要でした。しばらくの間は併記している方が安全ですね。

これで下手なFlashに手間をかけずに、Javascriptにうんうんうならずに、かなり簡単に導入できそうです。

そのほかのプロパティを少しご紹介。

ease	開始と終了をなめらかに（初期値）
linear	一定
ease-in	ゆっくり始まる
ease-out	ゆっくり終わる
ease-in-out	ゆっくり始まって、ゆっくり終わる
cubic-bezier(x1, y1, x2, y2)	進行割合を示す3次ベジエ曲線の制御点をそれぞれ代入

infinite	無限に繰り返す
数値	再生回数を指定（初期値は1）