今回は前回に引き続いて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などにもついて書かれているので参考になる。
