Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

アニメーション

アニメーションは、魅力的なウェブ アプリケーションやサイトを作る上で重要な役割を果たします。ユーザーは、応答性の高いインタラクティブなユーザー インターフェースを期待しています。しかし、インターフェイスのアニメーション化は、必ずしも簡単ではありません。アニメーション化の対象、タイミング、アニメーション感触などを考慮する必要があります。

TL;DR

  • プロジェクトに躍動感を与える手段として、アニメーションを使用します。
  • アニメーションによって、ユーザー インタラクションをサポートします。
  • アニメーション化するプロパティによっては、多くのリソースを要する場合があるので注意してください。

適切な要素をアニメーション化する

素晴らしいアニメーションは、ユーザーに楽しみを与え、リピート率を向上させます。幅、高さ、位置、色、背景など、ほとんどの要素をアニメーション化することができます。ただし、潜在的なパフォーマンスのボトルネックや、アニメーションによってアプリケーションの雰囲気がどう変化するのかを把握しておく必要があります。アニメーションがスムーズに動かなかったり、選択を誤ったりすると、ユーザー エクスペリエンスが低下します。そのため、パフォーマンスと適性の両方を考慮しなければなりません。

ユーザー インタラクションのサポートにアニメーションを使用

手当たりしだいにアニメーション化をしないでください。アニメーションを多用するとユーザーに不快感を与え、目障りになってしまいます。代わりに、ユーザー インタラクションをサポートする目的で、戦略的にアニメーションを使用してください。メニュー アイコンをタップした際にページの横からナビゲーション ドロワーが現れるようにしたり、ボタンをタップした際に画面が応答した感じを出すために微妙な輝きやバウンスを使用します。ユーザーの行動を不必要に妨害したり中断するアニメーションは使用しないように注意してください。

負荷の大きいプロパティをアニメーション化しない

不適切に使用されたアニメーションよりもさらに問題なのが、ページの動きを詰まらせてしまうアニメーションです。こういったアニメーションに対してユーザーはストレスや不満を感じ、アニメーションは一切不要だと感じてしまうでしょう。

プロパティの中には変更時の負荷が大きいものがあり、それが原因で画面がスムーズに表示されなくなる場合が多くあります。たとえば要素の box-shadow を変更すると、テキストの色を変更するよりもペイント処理で負荷がかかります。また、要素の width を変更すると、transform を変更するよりも負荷は大きくなります。

アニメーションのパフォーマンスに関する検討事項の詳細は、アニメーションとパフォーマンスのガイドをご覧ください。要約すると、できるだけ形状と不透明度を変更して、will-change を活用することが重要だと言えます。特定のプロパティをアニメーション化することによってトリガーされる動作について詳しく知りたい場合は、CSS トリガーを参照してください。