原則

起点

  • アニメーションはインターフェース要素を固定するのに役立ちます。例えば、メニューはそれを開いたボタンから拡大することができます。
  • アニメーションは場所の感覚を与えるのに役立ちます。例えば、サイドバーは側面からアニメーションで表示され、常に画面外に隠れていたことを示唆します。
  • アニメーションを設計する際は、実際の材料を扱っているかのように考えてください。ユーザーインターフェース要素が実際の材料でできていると想像してください — 画面に表示されていないとき、どこにありますか？アニメーションを使用してそれを表現してください。

速度

  • アニメーションはユーザーのインタラクションを妨げてはいけません。アニメーションは速く、ほとんどの場合0.2秒未満で完了するべきです。
  • ユーザーはアニメーションが終了するのを待たずにインタラクションできるべきです。
  • アニメーションはパフォーマンスが良くなければなりません。可能な限りtransform CSSプロパティを使用してください。これにより、要素がGPU上でレンダリングされ、スムーズになります。
  • アニメーションが速くてパフォーマンスが良くできない場合は、それを省略してください。

シンプル

  • 材料がゴムでない場合はバウンドしないでください。
  • 回転、折りたたみ、または曲線パスでアニメーションしないでください。シンプルに保ってください。

一貫性

一貫したアニメーションを作成するには、アニメーションされたときの要素の動作に関する物理的なルールを確立する必要があります。すべてのアニメーションがこれらのルールに従うと、一貫性があり、関連性があり、予測可能に感じられます。アニメーションはユーザーの期待に合致するべきであり、そうでない場合は、その仕事に適したアニメーションではない可能性があります。

タスクに対して既に存在するアニメーションを再利用してください。

アクセシビリティの考慮事項

  • アニメーションは控えめであるべきです。動きによって引き起こされる前庭障害を持つユーザーに配慮してください。
  • 現在、適応技術にコンテンツを報告している要素（例：更新を受け取っているaria-live領域）をアニメーションしないでください。これにより、技術が積極的に変化している領域を解析しようとして混乱を引き起こす可能性があります。
  • ユーザーの行動によって直接トリガーされないアニメーションは避けてください。
  • 可能な限り、アニメーションがOSレベルの「動きを減らす」設定を尊重することを確認してください。これは、prefers-reduced-motionメディアクエリを利用することで実現できます。Gutenbergには、CSS animateプロパティを含むルールと一緒に使用するための@reduce-motionミキシンが含まれています。

再利用アニメーションのインベントリ

一般的なAnimateコンポーネントは、インターフェースの異なる部分をアニメーション化するために使用されます。利用可能なアニメーションの詳細については、コンポーネントのドキュメントを参照してください。