CSS3 animation　キーフレームアニメーション - Three.jsを使って、作ってみた

今回は、CSS3のキーフレームアニメーションについて書きます。

キーフレームアニメーションを使うと、高度なアニメーションが作れます。
細かくアニメーションを設定できると言ったほうが、わかりやすいかな・・・

CSS3のアニメーションを初めて知る方は、こちらを先に見といたほうがいいです。

キーフレームアニメーションを使用するには、「animation」を使います。

「animation」のプロパティは、6つのあります。

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

簡単に、この６つを説明します。
１のanimation-nameは、キーフレームの名前です。
２のanimation-durationは、アニメーションにかかる時間（秒）です。
３のanimation-timing-functionは、変化のタイミングです。
４のanimation-delayは、何秒後にアニメーションをするか。
５のanimation-iteration-countは、アニメーションの繰り返し回数です。
６のanimation-directionは、アニメーションを交互に反転再生させるかどうかを指定します。

これらの書き方は、このように書きます。

animation-name: test;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: -2s;
animation-iteration-count: infinite;
animation-direction:alternate;

また、こちらの６つのプロパティは、１行で指定できます。

animation: test 5s ease 1s infinite normal;

左から順にanimation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-directionとなっています。
間は、スペースで区切ります。

次は、キーフレームの設定です。
この設定で、アニメーションの詳細な動作を指定します。

このように書きます。

@keyframes test{
		0% {width: 300px; background: yellow; }
		50% {width: 400px;background: orange; }
		100% {width: 500px;background: red; }
}

「@keyframes」の後の「 test」はキーフレームの名前です。上で書いた「animation-name」をここで使います。

０％や５０％は、アニメーションの割合です。
つまり、アニメーションが０％の時、どんな形をしているか、アニメーションが５０％の時にどんな形をしているか等を指定する感じです。

キーフレームの指定方法は以上で終わりです。

では、実際のプログラムを書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>css3</title>
	<style>
	div{
		width: 200px;
	 	height: 200px;
 		background-color: blue;
 		-webkit-animation: test 5s ease 1s infinite normal;
	}
	@-webkit-keyframes test{
		0% {width: 300px; background: yellow; }
		50% {width: 400px;background: orange; }
		100% {width: 500px;background: red; }
	}
	</style>
</head>
<body>
		<div id="nya"></div>
</body>
</html>