ページのロード時にCSS3アニメーション（transitions）を動かす

· by · in

前の記事では hover や active などマウスイベントでのアニメーションだったので、オンロード時にCSS3のアニメーション実行方法を記します。

サンプル

まずアニメーション動作を記述する。
今回はオンロード時にフワッとフェードインさせる内容。

@-webkit-keyframes fadeIn {
	0% {
		filter: alpha(opacity=0);
		-moz-opacity:0;
		opacity:0;
	}
	100% {
		filter: alpha(opacity=100);
		-moz-opacity:1;
		opacity:1;
	}
}

「@-webkit-keyframes」に続き「fadeIn」という名前で定義しています。
JavaScriptのfunctionによる関数定義と同じ。
その中で0%～100%によるスタイルの状況を記述する。
色や透明度だけでなく拡大縮小・回転などの変形も可能。

そしてアニメーションを反映させたいクラスへ下記のように記述する。

.honyarara {
	～通常のスタイル記述～
	-webkit-animation-name: fadeIn;
	-webkit-animation-duration: 1s;
}

「-webkit-animation-name」でアニメーション定義を指定。
「-webkit-animation-duration」でアニメーションを何秒かけて実行するか指定。

つまりこの記述を使えば、CSS内でも表示スタイルとアニメーション動作を分割して定義することができるわけです。
「fadeIn」を他のクラスに指定すれば汎用的にフェードインするわけです。

button:hover {
	-webkit-animation-name: fadeIn;
	-webkit-animation-duration: 1s;
}

当然こんな風に hover などのマウスイベントに汎用的に扱えます。
フェードイン・アウトなどの汎用的な変形動作を定義しておくと便利そう。

ちなみに現時点ではChrome以外では動作しません。
なので最初のCSSにある「filter:alpha」と「-moz-opacity」はまだ意味ないんですけどね。

筆者について

KaBuKi
ゲームとジョジョを愛するファミッ子世代。好きな言葉は「機能美」。
公私ともにWebサービスを作る系男子。
Tags: ,