CSS3のアニメーションってすごい。

下の記事でほとんどCSSだけでアニメーションしているサンプルがっ。
-webkit-transformを使ったCSSアニメーションを試してみた at HouseTect, JavaScriptな情報をあなたに
CSS3のアニメーション機能ってのはすごい。JavaScriptで動かすのに比べて簡単でかつなめらかに動く気がする。まだ、動作するブラウザが限られているっぽい（Webkit系とFirefoxくらいなのかな）んだけど、今からでもやっておくべきだと思った。

CSSアニメーション系の仕様

CSS transformを使って3Dっぽく見せるサンプル
- More on 3D CSS Transforms - Ajaxian

そこで、ぐるぐる周りながら文字が大きくなってフェードアウトしていくっていうアニメーションを作ってみた。以下そのCSSの部分。Safari、Chromeでこのページを見たらくるくる回るサンプルが見えるはず。

Hello World

2010/06/12の記事のサンプル

#sample1{
	/* テキストの見た目 */
	position: absolute;
	width: 300px;
	height: 100px;
	line-height:50px;
	text-align: center;
	font-size: 30px;
	background-color: #ddd;
	-webkit-border-radius: 10px;
	-webkit-box-shadow: #999 5px 5px 5px;
	
        /* アニメーションに関する設定 */
	-webkit-animation-name: rotate1,fade,move;
	-webkit-animation-iteration-count: infinite;/* 数字にすると指定した回数だけ繰り返す */
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 8s;
}
#sample1_title {
	font-size:12px;
	color: #777;
}
/* くるくる回転させるアニメーション */
@-webkit-keyframes rotate1 {
0% {-webkit-transform: rotate(0deg) rotateY(0) scale(1)}
70% {-webkit-transform: rotate(720deg) rotateY(0) scale(2.5)}
90% {-webkit-transform: rotate(720deg) rotateY(0) scale(2.5)}
100% {-webkit-transform: rotate(720deg) rotateY(360deg) scale(2.5)}
}

/* フェードインとフェードアウトするアニメーション */
@-webkit-keyframes fade {
0% {opacity: 0;}
50% {opacity: 0.3;}
70% {opacity: 0.9;}
90% {opacity: 0.9;}
100% {opacity: 0;}
}

/* 移動させるアニメーション */
@-webkit-keyframes move {
0% {left: 0; top: 0;}
50% {left: 200px; top: 200px;}
100% {left: 500px; top: 500px;}
}

HTMLは下の3行だけ。

<div style="position: absolute;">
<div id="sample1">Hello World<div id="sample1_title">2010/06/12の記事のサンプル</div></div>
</div>

まず、以下の行でアニメーションの指定をしている。ratate1, fade, moveっていう名前は、下の方でできている@-webkit-keyframeで定義したアニメーションの名前をカンマ区切りで指定したもの。

-webkit-animation-name: rotate1,fade,move;

こうすることで複数のアニメーションを組み合わせて複雑な動きにすることができる。今回は「ぐるぐる」と「フェード」と「拡大」っていうアニメーションを組み合わせている。

次に、以下の行でアニメーションを繰り返す回数を指定している。今回はinfiniteを指定して無限に繰り返すようにしている。

-webkit-animation-iteration-count: infinite;

この値を「2」とかの数字にするとその回数だけアニメーションを繰り返すことになる

次にアニメーションのタイミングを指定する。linear、ease-in、ease-out、ease-in-out、cubic-bezierの値を指定する。

-webkit-animation-timing-function: linear;

タイミングって何って感じだけど、以下のサイトにわかり易い例が紹介されています。これを見れば一目瞭然って感じ。cubic-bezierは独自のタイミングを作れるみたい。例えばcubic-bezier(0,1,1,0)こんな感じで指定するそうです。ベジェ曲線を使って定義するみたい。
Transition Timing Functions < CSS | The Art of Web

そして、次の行でアニメーションさせる時間を指定します。

-webkit-animation-duration: 8s;

次にアニメーションのくるくる回転させる部分を見てみる。

@-webkit-keyframes rotate1 {
0% {-webkit-transform: rotate(0deg) rotateY(0) scale(1)}
70% {-webkit-transform: rotate(720deg) rotateY(0) scale(2.5)}
90% {-webkit-transform: rotate(720deg) rotateY(0) scale(2.5)}
100% {-webkit-transform: rotate(720deg) rotateY(360deg) scale(2.5)}
}

0%〜100%の設定があるけど、これは、-webkit-animation-durationで指定した時間の割合を表している。例えば上の例だと、0%ではrotateが0degで、70%ではrotateが720degとなっている。720degというのは角度で720度ということ。つまり、360度×2=720度ってことで2回転するってこと。で、0%〜70%までの時間に2回転してね、っていう意味となる。
また、-webkit-transformは、今説明したrotateやY軸を基準にした回転をするrotateYや、拡大縮小するためのscaleなどのファンクションを複数指定することができる。CSS 2D Transforms Module Level 3

残りのアニメーションも同じように適当なタイミングで変化させるようにすると、それっぽいアニメーションができあがる。また、transformでアニメーションをさせるのではなく、下の例のように今までのCSSの定義を使うこともできる。下の例ではtop, leftで位置を移動させている。他にもbackground-colorとかで適当なタイミングで色を変えたりもできる。

@-webkit-keyframes move {
0% {left: 0; top: 0;background-color: #ddd;}
50% {left: 20%; top: 20%;background-color: #dd0;}
100% {left: 50%; top: 50%;background-color: #d0d;}
}

こんな感じでいろいろ組み合わせてみると面白いアニメーションが出来上がりそうだねー。いやー。面白い。