CSS3 transition アニメーション - Three.jsを使って、作ってみた

今回は、CSS3の「transition」について書きます。

「transition」を使うと、要素に簡単なアニメーションをつけれます。

transitionには、４つのプロパティがあります。

transition-property・・・アニメーションさせる対象
transition-duration・・・変化に掛かる時間
transition-timing-function・・・変化のタイミング
transition-delay・・・変化がいつ始まるか

この４つです。

※「webkit」などのベンダープレフィックスは適宜つけてください。最新のchromeですとベンダープレフィックスはいりません。

１の「transition-property」は、アニメーションさせる対象を指定できます。
基本的には、このように使います。

transition-property: all;

「all」は、変化を適用できるプロパティすべてがアニメーションします。
例えば、
f:id:gupuru:20140320224121p:plain
このようなボックスに、「transition-property: all;」とすると、「背景色」,「高さ」,「幅」などがアニメーションします。

高さだけアニメーションさせたい場合は、

transition-property: height;

このようにします。
幅は「width」、背景色は「background-color」と指定します。

ちなみに、

transition-property: height background-color;

このように複数指定するともできます。複数指定する場合は、スペースで区切ります。

2の「transition-duration」は、アニメーションする時間を指定できます。
基本的には、このように使います。

transition-duration:1s;

数値が大きいほど、アニメーションする時間がゆっくりです。

３の「transition-timing-function」は、アニメーションするタイミングを指定できます。
簡単に言いますと、すぐアニメーションを開始するのか、または、ゆっくりアニメーションを開始するなど、こういう事を指定します。

基本的には、このように使います。

transition-timing-function:ease;

タイミングの指定方法は複数あります。

ease・・・開始と終了が滑らか
linear・・・一定
ease-in・・・ゆっくり始まる
ease-out・・・ゆっくり終わる
ease-in-out・・・ゆっくり始まってゆっくり終わる

この辺は、実際にやってみた方が分かりやすいです。

4の「transition-delay」は、アニメーション開始時間を指定できます。
基本的には、このように使います。

transition-delay:2s;

この場合ですと、２秒後にアニメーションが開始されます。

１〜４を実際のプログラムに使うとこんなかんじです。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>css3</title>
	<style>
	div{
		width: 200px;
	 	height: 200px;
 		background-color: red;
 		transition-property: all;
		transition-duration:2s;
		transition-timing-function:ease;
		transition-delay:0.1s;
	}

	div:hover {
		background-color:yellow;
		width:400px; 
		height:300px; 
	}
	</style>
</head>
<body>
		<div id="nya"></div>
</body>
</html>

実行結果
f:id:gupuru:20140320224121p:plain
アニメーション後
f:id:gupuru:20140320230110p:plain
こちらのプログラムは、赤色のボックスにマウスカーソルをのせると黄色のボックスに変化します。

ちなみに、１〜４は１つにまとめれます！！

transition: all 2s ease 0.1s;
/*transition:  property duration timing-function delay*/

一番左から、property,duration,timing-function,delayの順番です。

上のプログラムを書き直します。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>css3</title>
	<style>
	div{
		width: 200px;
	 	height: 200px;
 		background-color: red;
 		transition: all 2s ease 0.1s;
	}

	div:hover {
		background-color:yellow;
		width:400px; 
		height:300px; 
	}
	</style>
</head>
<body>
		<div id="nya"></div>
</body>
</html>

スッキリな形になりました。

アニメーションを応用すると・・・

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>css3</title>
	<style>
	div{
		width: 200px;
	 	height: 200px;
 		background-color: red;
 		transition: all 2s ease 0.1s;
	}

	div:hover {
		background-color:yellow;
		width:400px; 
		height:300px; 
		-webkit-transform:rotateY(180deg); 	
       }
	</style>
</head>
<body>
		<div id="nya"></div>
</body>
</html>

こちらのプログラムは、マウスカーソルがボックスに重なると、回転しながら大きくなります。

アニメーションは以上です。

参考サイト
transition－CSS3リファレンス