CSS3アニメーションを利用して動きを付ける
ここまでで動画アルバムの機能は完成していますが、せっかくのアプリなのにシンプルすぎて物足りないと感じるかもしれません。そこで、CSS3アニメーションを使って、サムネイル画像がゆっくりと拡大縮小するちょっとした動きを付けてみましょう。すべてのサムネイルが同じように動いてしまうと面白味がありませんので、多少バラバラにアニメーションさせます。
iPhoneで利用できるCSS3アニメーションには、-webkitというベンダープレフィックスが付いており、まだ正式な仕様ではないことを示しています。さまざまなブラウザーに対応しなければならない一般的なWebサイトでは利用しづらい機能ですが、PhoneGap+iPhoneだけなら気兼ねなく使えます。
まず、拡大縮小の動きを作成します。CSS3アニメーションでは動きをキーフレーム単位で作成します。@-webkit-keyframesの後にアニメーションの名前を付け、{}内にアニメーションのタイミングと対応するCSSプロパティの値を記述します。たとえば以下のように指定すると、アニメーション全体の20%の時に不透明度を50% (0.5) にします。%以外にtoやfromでも指定できます。
20% { opacity: 0.5; }
拡大縮小の動きは、小さいサイズから大きいサイズに変化させます。大きさを変化させる場合は、-webkit-transformプロパティを使い、scale()で倍率を設定します。scale(0.5)を指定すると50%(半分)のサイズに、scale(2)を指定すると200% (2倍)のサイズになります。また、小さいときには少し透明になるようにopacityの値を設定します。
ここまでをまとめると以下のようになります。アニメーション名は「videoAnime」としています。
@-webkit-keyframes 'videoAnime' {
0% { -webkit-transform : scale(0.75); opacity: 0.25; }
100% { -webkit-transform: scale(1.2); opacity: 1.0; }
}
動きの部分は作成できたので、あとはどのタグ（要素）にアニメーションを適用するかを指定します。アニメーションさせる要素は-webkit-animationプロパティで指定します。-webkit-animationプロパティには以下の引数を指定します。
-webkit-animation: 名前 再生時間 動き 再生開始までの時間 繰り返し回数 動きの方向
-webkit-animationの最初の引数には、アニメーションの名前（@-webkit-keyframesで付けた名前）を指定します。
第2引数にはアニメーションにかかる時間を指定します。「1.5s」と指定すると1.5秒でアニメーションを完了させます。第3引数では動きの種類（以下の表）を指定します。
| ease | liner | ease-in |
| ease-out | ease-in-out | cubic-bezier |
第4引数はアニメーションを開始するまでの時間です。「0s」を指定すればすぐにアニメーションが再生されます。第5引数は繰り返し回数で、無限に繰り返す場合は「infinite」を指定します。
第6引数は動きの方向です。「alternate」を指定すると通常の再生と逆再生を繰り返します。
ここまでをまとめて指定したのが以下のスタイルシートです。
video {
-webkit-animation : 'videoAnime' 1.5s linear 0s infinite alternate;
}
このままスタイルを適用すると、すべての動画サムネイルが拡大縮小してしまいます。そこで、CSSのnth-child()セレクターを使ってバラバラの動きにします。
nth-child()は指定した値でのノードを示します。nth-child(1)とすると最初のノードを指定したことになります。nth-child()は2nや2n+1といった計算式での指定もできます。nth-child(2n)とすると2の倍数のノード（偶数のノード）が対象になり、2n+1だと奇数だけのノードが対象になります。
なるべくバラバラに動かしたいので、3の倍数ごとにアニメーションを設定しました。実際のコードは以下のようになります。
実際のコード
video:nth-child(3n) {
-webkit-animation : 'videoAnime' 1.5s linear 0s infinite alternate;
}
video:nth-child(3n+1) {
-webkit-animation : 'videoAnime' 2s linear 0s infinite alternate;
}
video:nth-child(3n+2) {
-webkit-animation : 'videoAnime' 2.5s linear 0s infinite alternate;
}
