アニメーション

要素のスタイルをアニメーションさせるスタイル。
主に変形と併用されるが、文字色や背景色、透明度やドロップシャドウのぼかし具合など、スタイルであれば（ほぼ）何でもアニメーションの対象に指定できる。
アニメーション自体には、 所要時間・イージング・開始までの待ち時間・再生回数・再生方向 を指定できる。

基本的に「ある状態」から「ある状態」への変化を補間するものであり、状態の数が多くなるほどコードは複雑になる。
さらに、途中でイージングを変更したり、ユーザーの入力に応じて挙動を変化させたりするには JavaScript による制御が必要となる。
総じて、アニメーション実装には工数がかかりやすく、バグの温床となりやすい。

デモ

所要時間

• マイクロ秒で指定可能。

イージング

• 基本的に linear と ease 系のイージングのみ扱う。
• 他にも cubic-bezier 関数 でカスタマイズ可能だが、ここでは触れない。
• steps はコマ送り。スプライトシートと併用すればパラパラアニメの要領でアニメーションを実現できる。

待ち時間

• アニメーションが再生されるまでの時間。
• 主にファーストビューのアニメーションに指定することでユーザーの視線移動を制御できる。

再生回数

• アニメーションの再生回数。

再生方向

• 順再生と逆再生、およびその組み合わせを指定できる。

注意

• アニメーションする要素が増えると動作が重くなる。
  モダンなスマートフォンブラウザであれば 50 個以下に収めたい。

応用例

See the Pen Animated Bubbles by Ben Hodgson (@bh) on CodePen.