CSS3のanimationによるキーフレームアニメーションをやってみた。

css

今回は前回に引き続いてCSS3の「animation」プロパティについてメモっていく。

animationプロパティの種類

animationプロパティは前回のtransitionプロパティと似ている部分も多いのでそんな難しくない。

animation-name
実行するアニメーションの名称。任意の名前を設定できる。
animation-duration
アニメーションを実行する時間。「1s」「2s」などで表す。
animation-delay
アニメーションの実行を遅らせる遅延効果。「1s」「2s」などで表す。
animation-direction
アニメーションを逆方向に実行させるかどうか(行って戻るみたいなイメージ)のサイクルを決める。

normal
順方向のみ。アニメーション終了後に初期値に戻る。
alternate
順方向→逆方向のアニメーションを実行する。(初期状態に戻るようなアニメーション)
reverse
逆方向からアニメーションが始まる。(初期状態に戻る)
alternate-reverse
逆方向→順方向にアニメーションが始まる。
animation-iteration-count
アニメーションを実行させる回数。

infinite
無限に繰り返す。
数値
指定された回数のみ繰り返す。
animation-timing-function
アニメーションの変化の種類。

@keyframesを利用したアニメーションの設定

animation-nameで指定した名前を元に@keyframesを利用してアニメーションの設定を行う。

@keyframes内ではアニメーションをパーセンテージで表すキーフレームを入れる必要がある。0%が最初のアニメーションで100%でアニメーションが終了する。
つまり0%で変化させるcssプロパティの初期値を記述して100%で変化した後のcssプロパティを記述すれば、animation-durationで指定した秒数でアニメーションを実行しくれる。
イメージはFlashのタイムラインみたいにアニメーションで変化させたいところにキーフレームを入れるイメージですね。途中で変化させたけれパーセントで中間にキーフレームを入れることもできる。

例えば、「div.box要素の背景色をグレー→青→赤→青→グレーと色を2回変化させるアニメーションをずっと繰り返す」という場合は下記のようになる。
ちなみに、「animation-direction:normal」とすると「グレー→青→赤→グレー→青→赤」と繰り返す。

css3のanimationプロパティの練習 – jsdo.it – share JavaScript, HTML5 and CSS

animationのショートハンドを使ってみる。

transition同様にアニメーションにもショートハンドがあるとのこと。
CSS Animations Module Level 3

[ ||  ||  
||  ||  ||  
|| ] [, [ ||  
||  ||  || 
 ||  
|| ] ]*

リンク先を見ていただくと分かるが上記のようになっているので、その順番でショートハンドで書けば問題なさそう。

/* movetransformのアニメーションを1秒間で順方向→逆方向のサイクルを繰り返し処理する */
-webkit-animation:"movetransform" 1s ease-out infinite alternate;

ということでせっかくなので、transformで変形させるアニメーションをショートハンドで書いてみた。

animationをショートハンドで書いてみた – jsdo.it – share JavaScript, HTML5 and CSS

参考になったサイト

MOZILLA DEVELOPER NETWORK「CSS animations」
ここはMozilla社が運営しているサイトだと思われるが、html5のcanvasやfile apiなどにもついて書かれているので参考になる。