きたけんブログ

旅と趣味と

CSSを使ったアニメーション

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

まずはサンプルから。右から左へスライドインするアニメーションです。サンプルでは分かりやすくするため、無限ループをかけてます。また見栄えのため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)