animationとは

  • キーフレームを設定したアニメーションが出来る
  • transitionと違い、きっかけなしでもアニメーションが出来きる
  • アニメーションをループさせることが出来きる

transitionに関してはこちらを参照

CSS3で出来るアニメーション 1.CSS transition | 03LOG

プロパティはtransitionと似ていますが、animation-name、animation-iteration-count、animation-directionはanimationはtransitionにはないプロパディです。

animation-name

キーフレームの名前を指定します。 キーフレームの指定の仕方は後半で説明します。

animation-duration

変化にかかる時間を指定 初期値は0, 一秒=1s、値が増えるほど変化にかかる時間が長くなる。

animation-timing-function

変化のタイミング、具合を調整

ease:開始と終了をなめらかに(初期値) ease-in:ゆっくり始まる ease-out:ゆっくり終わる ease-in-out:ゆっくり始まってゆっくり終わる linear:一定に変化する

animation-delay

変化がいつ始まるかを指定できる。 初期値は0、一秒なら1s、値が増えるほど始まるタイミングが遅くなる。

animation-iteration-count

変化のタイミング、具合を調整

infinite:繰り返しアニメーションさせる 数値:指定下回数だけアニメーションさせる(初期値は1)

animation-direction

最後までアニメーションした後のアニメーションの方向について指定できます。

normal:最後までアニメーションした後、また最初からアニメーションする(初期値) alternate:最後までアニメーションしたら、逆再生でアニメーションする

@keyframesとは

キーフレームを設定するには@keyframesを使います。 記述の仕方は以下の通りです。

@keyframes アニメーション名{
0%{スタート時の状態を記述}
100%{終了時の状態を記述}
}

animation-nameにアニメーション名を指定するとそのキーフレームが適用されます。

@keyframes move{
0%{width:0px}
100%{width:100px}
}

この場合、moveというアニメーション名で、widthが0から100pxへ変化するアニメーションになります。

@keyframes move{
0%{width:0px}
50%{width:200px}
100%{width:100px}
}

上記のように、0〜100%の間で変化の度合いを指定することが出来ます。 この場合はスタートは0で、半分すぎたところで200pxまでのびて、その後100pxで縮むアニメーションになります。

使用できるブラウザは

IEは10から使用が可能です。またChrome、iOS、Androidはベンダープレフィックスが必要です。 またFirefoxの古いバージョンも必要なので

#box{
animation:move 2s ease-out 0s 1 normal;
}

@keyframes move{
0%{width:0px}
100%{width:100px}
}

こちらのアニメーションを多くのブラウザで対応させるためには

#box{
-webkit-animation:move 2s ease-out 0s 1 normal;
-moz-animation:move 2s ease-out 0s 1 normal;
animation:move 2s ease-out 0s 1 normal;
}

@-webkit-keyframes move{
0%{width:0px}
100%{width:100px}
}

@-moz-keyframes move{
0%{width:0px}
100%{width:100px}
}

@keyframes move{
0%{width:0px}
100%{width:100px}
}

このような記述になります。

うまく使えばこんな感じに細かくアニメーションさせることも出来ます。