Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

CSS3 transition アニメーション

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


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

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

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

この4つです。

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


1の「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;

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


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

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

transition-timing-function:ease;

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

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

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


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

transition-delay:2s;

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


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

<!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
こちらのプログラムは、赤色のボックスにマウスカーソルをのせると黄色のボックスに変化します。


ちなみに、1〜4は1つにまとめれます!!

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リファレンス

広告を非表示にする