Animations

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

TL;DR

  • プロジェクトに生命を与える手段として、アニメーションを使用します。
  • アニメーションは、ユーザーとの対話がサポートされるべきです。
  • アニメーション化するプロパティに注意してください。高価なものもあります!

アニメーション化する正しい対象を選択する

素晴らしいアニメーションは、プロジェクトにおいて、ユーザーに楽しみと参加意識を与えます。 幅、高さ、位置、色、背景など、好みのほとんどのものをアニメーション化することができますが、潜在的なパフォーマンスのボトルネックとなるアニメーションは、アプリケーションの性質に影響を与えることを理解する必要があります。 不十分に選択されたアニメーションは、ユーザー エクスペリエンスに負の影響を与えるため、パフォーマンスと適性に注意しなければなりません。

対話のサポートにアニメーションを使用

手当たりしだいにアニメーション化しないでください。ユーザーに不快感を与え、目障りになるだけです。 代わりに、ユーザーとの対話を生む戦略的なアニメーションを使用してください。 メニュー アイコンをタップすると、ページの横からメニューが現れるか、ボタンをタップした場合、相互操作を確認するために、たとえば微妙な輝きやバウンスを使用します。 ユーザーの行動を不必要に妨害したり中断するアニメーションを避けるように注意してください。

高価なプロパティをアニメーション化しない

不適切な配置よりも悪いアニメーションの唯一のことは、ページ スタッターを引き起こすものです。 これにより、ユーザーはイライラや不満を感じ、すべてをアニメーション化しなければよかったと後悔するでしょう!

プロパティの中には変更すると高価なものがあり、スタッターを引き起こす可能性が高くなります。 たとえば、要素の box-shadow を変更すると、たとえばテキストの色を変更するよりも、ペイント操作が非常に高価なものになります。 要素の width を変更すると、transform 変更するよりも高くつきます。

アニメーションのパフォーマンスに関する考慮事項の詳細は以下をご覧くださいAnimations and Performance。ただし、TL,DR で変換と不透明度の変更に固執する場合は、will-changeを活用してください。 特定のプロパティをアニメーション化することによってトリガーされる動作を正確に知りたい場合は、[CSS トリガー] (http://csstriggers.com) を参照してください。