animate

機能を分析し、インターフェースの動作が遅く、うるさく、または大げさに感じられないようにしながら、明瞭さ、フィードバック、体感速度、洗練度を高めるモーションを追加します。

必須の準備

ユーザーは /animate でこのワークフローを開始します。このスキルが有効になったら、$frontend-design を読み込んでください。ここにはデザイン原則、アンチパターン、コンテキスト収集プロトコルが含まれています。作業を進める前にこのプロトコルに従ってください。デザインコンテキストがまだ存在しない場合は、必ず最初に $setup を読み込んでください。さらに、パフォーマンスの制約も確認してください。 タイミング、イージング、振り付け、動きを抑える設定への対応については、モーションのリファレンスを参照してください。 ファイル名を推測するのではなく、用途別にモーションライブラリの詳細を調べたい場合は、アニメーションのリファレンスインデックスを参照してください。 モーションによって、浮き上がり、押し込み、くぼみ、ドラッグ、レイヤー化された奥行きを強調する場合は、エレベーションシステムを参照してください。 アニメーションの判断がフォーカス、読み込み、トランジション、フィードバックの状態に関わる場合は、インタラクションのリファレンスを参照してください。 ボタン、タブ、ツールチップ、トースト、トグル、ドロワー、送信アクションなどのカスタムプリミティブにモーションが影響する場合は、コンポーネントの構造のリファレンスを参照してください。 小さな画面、タッチ操作の状況、限られたビューポート領域に合わせてモーションを調整する必要がある場合は、レスポンシブデザインのリファレンスを参照してください。 フレームワーク固有のアニメーションを判断する前に、フレームワーク公式ドキュメントのリファレンスを参照してください。 React のトースト、ドロワー、テキストモーションなど、強力なアクセラレーターがすでに用意されている UI パターンに関係する場合は、React shadcn アクセラレーターのリファレンスを参照してください。 フレームワークのアニメーションライブラリに頼らず、最新の CSS、Tailwind、WAAPI でモーションをシンプルに実現できるか判断するには、CSS、Tailwind、WAAPI のモーションリファレンスを参照してください。 時間ではなくスクロール位置に応じてモーションを進行させる場合は、スクロール駆動アニメーションのリファレンスを参照してください。 ページの状態間や DOM の変更時に、共有要素の連続性を保ちながらアニメーションさせる場合は、ビュー遷移のリファレンスを参照してください。 このスキルの Emil に着想を得たモーションガイダンスの出典については、クレジットと出典を参照してください。 モーションの種類ごとにまとめたガイダンスについては、開始アニメーション、終了アニメーション、ジェスチャーインタラクション、マイクロインタラクションを参照してください。 モーションカーブを選ぶ際は、イーズアウトのデフォルト、コンテキスト別のイージング、カスタムイージングカーブを参照してください。 イージングではなく主に時間について検討する場合は、300ms 未満の UI、押下とリリースの非対称なタイミング、ドロワーの 500ms のタイミング、体感速度を高める、ツールチップのタイミングを段階的に調整するを参照してください。 モーションパターンにより具体的なガイダンスが必要な場合は、画面上の移動に使うイージング、シートとドロワーのイージング、スプリングモーションを参照してください。 ジェスチャーの多い UI を実装する場合は、減衰するドラッグ境界、上方向のドラッグ摩擦、割り込み可能なアニメーション、勢いを利用した閉じる操作、ポインターキャプチャ、スクロールとドラッグの競合、速度を考慮したスナップポイントを参照してください。 仕上げとアクセシビリティの調整については、ぼかしでつなぐトランジション、clip-path を使ったタブ、動きを抑える設定への対応、不透明度によるフォールバック、動きを抑える設定の代替手段、Motion の useReducedMotion、ホバー領域の隙間を埋める、スクロール表示のしきい値、子要素のオーケストレーション、トーストスタックの奥行きを参照してください。 パフォーマンスが重要なプロパティ選択については、transform と opacity のみを使う、ドラッグ中のループで CSS 変数を避ける、レイアウトを伴わない clip-path の表示、メインスレッド負荷時のハードウェアアクセラレーションによるモーション、will-change を必要な箇所だけに使うを参照してください。 モーションに関する戦略的な判断については、即時のアクションフィードバック、インタラクションの頻度、キーボード操作にはアニメーションを使わない、マーケティング用途の例外、アニメーションの目的を参照してください。 実際の課題が transform の手法や空間的な印象に関するものであれば、preserve-3d エフェクト、ゼロから拡大しない、原点を考慮したアニメーション、パーセンテージ指定の translateYを参照してください。 transform の細かな仕上げについては、ボタン押下時の scale 0.97、子要素に影響する scale、SVG パスのモーフィングによる開閉アイコンを参照してください。 頻繁に使用するとインターフェースがすでに遅く感じられる場合は、optimize も読み込んでください。 動きの軽減、エラー、オーバーフロー、エッジケース、入力モードの混在への耐性をインターフェースにさらに持たせる必要がある場合は、harden も読み込んでください。

---

クレジットと着想

このスキルのモーションに関するガイダンスは、Emil Kowalski の animations.dev コースから一部着想を得ています。特に、本番環境の UI において、イージングの選び方、タイミング、節度ある演出、スプリング、「しっくりくる」モーションを重視しています。

また、Emil のアニメーションを多用したオープンソースプロジェクトである Sonner と Vaul からも着想を得ています。これらは、React のトーストとドロワーに関するガイダンスとして、このライブラリの別の箇所ですでに関連しています。

このリポジトリでは、コースの内容を直接再現するのではなく、それらの学びをリポジトリ固有のオリジナルなガイダンスとして書き直しています。

---

モーションの基本方針

アニメーションを追加する前に、次の順序で判断してください。

1. まず構造を整える — モーションは階層や状態を補強するものであり、分かりにくいレイアウトを救済するものではありません。
2. 目的のあるアニメーションだけを使う — すべてのアニメーションは、フィードバック、方向の把握、関係性、または楽しさを向上させるものである必要があります。
3. 速さを優先する — プロダクト UI は、印象的であることより、まず応答性の高さを感じさせるべきです。
4. モーションを中断可能にする — 古いアニメーションの完了より、新たなユーザーの意図を優先してください。
5. 入力方法に合わせる — マウス、タッチ、キーボードの操作に、すべて同じモーション処理を適用する必要はありません。
6. 最初から動きの軽減を考慮する — アクセシビリティはシステムの一部であり、後から行う仕上げではありません。
7. 要件を満たす範囲で最も軽量な実装を選ぶ — まず最新の CSS と Tailwind を使い、命令的なタイミング制御が重要な場合は WAAPI、操作に本当に必要な場合は Motion を使ってください。

モーションは、次のいずれかの目的に使ってください。

• フィードバック — 操作が行われたことを伝える
• 方向の把握 — 要素の移動元や移動先をユーザーが理解できるようにする
• 関係性 — 表面、レイヤー、コントロールの空間的な関係を示す
• 楽しさ — 基本的な使い勝手がすでに機能している状態で、温かみや個性を加える

これらの目的のどれにも当てはまらないアニメーションは削除してください。

モーションの機会を評価する

モーションによって体験が向上する箇所を分析してください。

1. 静的な箇所を特定する：

   • フィードバックの不足：ボタンのクリックやフォームの送信など、視覚的な応答がない操作
   • 唐突な遷移：表示／非表示、ページの読み込み、ルートの変更など、急に感じられる即時の状態変化
   • 分かりにくい関係性：空間的または階層的な関係が明確でない箇所
   • 楽しさの欠如：機能的ではあるものの、楽しさのない操作
   • 案内の見落とし：注意を促したり、動作を説明したりできる機会

2. コンテキストを把握する：

   • どのような個性がありますか？（遊び心があるか、真面目か。活気があるか、落ち着いているか）
   • パフォーマンスの予算はどの程度ですか？（コンパクトなレイアウト優先か。複雑なページか）
   • 対象ユーザーは誰ですか？（動きに敏感なユーザーか。速さを求めるパワーユーザーか）
   • 最も重要なのは何ですか？（単一のヒーローアニメーションか。多数のマイクロインタラクションか）
   • どの入力方法が重要ですか？（マウス、タッチ、キーボード、スタイラス）
   • 特にきびきびとした応答を保つべき高頻度の操作はどれですか？

コードベースから判断できない点がある場合は、推測できない内容を明らかにするため、ユーザーに直接確認してください。

重要：prefers-reduced-motion を尊重してください。動きを必要としないユーザーには、必ずアニメーションなしの代替手段を用意してください。

モーションは階層を補強するものであり、弱い階層を埋め合わせるものではありません。動かして初めてレイアウトが理解できるのであれば、まずレイアウトを修正してください。

アニメーション戦略の計画

意図のあるアニメーション計画を立てます。

• ヒーローモーメント：象徴的なアニメーションは何ですか？（ページ読み込み時？ヒーローセクション？重要な操作？）
• フィードバックレイヤー：どの操作に応答を示す必要がありますか？
• トランジションレイヤー：どの状態変化を滑らかにする必要がありますか？
• ジェスチャーレイヤー：ドラッグ、スワイプ、スナップ、閉じる操作のうち、物理的な動きが必要なのはどれですか？
• 楽しさのレイヤー：意外性や楽しさを演出できる場所はどこですか？
• 奥行きの設計：どの要素を浮き上がった、押し込まれた、ドラッグ中の、くぼんだ、または重なり合った状態に見せるべきですか？
• モーション軽減の計画：どの動きをフェード、ぼかし、または即時の状態変化に簡略化しますか？
• パフォーマンス予算：頻繁に発生するため、軽量に保つ必要がある動きはどれですか？

重要：あちこちに散らばったアニメーションより、よく統一された体験のほうが優れています。影響の大きい場面に注力してください。

モーションのデフォルトルール

製品のコンテキストに強い理由がない限り、アニメーション作業では以下をデフォルトの指針として使用してください。

1. 戦略と目的

• すべてのアニメーションには、フィードバック、方向づけ、関係性、または楽しさを伝える役割が必要です。
• 製品のインターフェースは通常、高速で、落ち着きがあり、正確に感じられるべきです。より遅く、ドラマチックな動きは、オンボーディング、ヒーローモーメント、ストーリーテリング、マーケティング向けの画面に限定してください。
• あらゆる場所に動きを加えるよりも、象徴的な演出を1つと、統制のとれたマイクロインタラクションを優先してください。
• ポインター操作にアニメーションを使っているからといって、キーボードで開始された操作までアニメーション化しないでください。キーボードを使うユーザーは通常、遅延を最小限に抑えた、予測可能な状態変化を求めています。
• 操作の頻度が高いほど、通常は必要な動きが少なくなります。高頻度で使われるコントロールは、ほぼ瞬時に反応するようにしてください。
• ユーザーの入力にはすぐに応答してください。可能な場合は、マイクロインタラクションでおよそ80ms以内に視覚的なフィードバックを示してください。
• 実際の処理におよそ400ms以上かかる可能性がある場合は、何も反応しないまま待たせるのではなく、楽観的 UI、スケルトン、進行状況、または明確な読み込みフィードバックで直ちに応答してください。
• 読み込みの遅さ、階層の弱さ、状態設計の不足をモーションでごまかしてはいけません。

2. イージングのデフォルト

• 要素の登場、表示、そしてほとんどのフィードバックトランジションには、デフォルトでイーズアウトを使用してください。
• 汎用的な CSS の ease デフォルトではなく、カスタムの cubic-bezier 曲線を使用してください。
• 画面上で往復する可逆的な状態変化には、イーズインアウトを使用してください。
• 動きとジェスチャー入力やオブジェクトの挙動を物理的に連動させる場合は、スプリングモーションを使用してください。
• ドロワー、シートなどのサーフェスでは、シートスタイルの曲線 cubic-bezier(0.32, 0.72, 0, 1) を出発点として使用できます。
• 洗練された UI の動きには、ease-out-quart、ease-out-quint、ease-out-expo のような指数関数的な減速を優先してください。
• 製品で意図的におもちゃのような、または遊び心のある物理的表現を採用している場合を除き、バウンスや弾性のある曲線は避けてください。通常、古くさく、騒がしく、気取った印象になります。
• コンテキストに合わせてイージングを選んでください。
  • サーフェスの登場 → イーズアウト
  • サーフェスの退出 → 時間を短くし、多くの場合イーズインまたはより鋭い退出曲線
  • 状態の切り替え／可逆的な動き → イーズインアウト
  • ジェスチャーに連動する動き → スプリングまたは速度を考慮した補間

3. タイミングと時間

• 繰り返し発生する UI の動きは、ほとんどの場合 300ms 未満にします。
• 押下状態、切り替え、色の変化、即時の応答には 100-150ms を使います。
• ホバー、メニュー、ツールチップ、小さな表示など、標準的な UI 状態の変化には 200-300ms を使います。
• ドロワー、モーダル、アコーディオン、主要なサーフェスの変化など、大きなレイアウト遷移には 300-500ms を使います。
• 500ms は、シートや段階的な表示など、大きなサーフェスの動きに限る特別な上限とし、通常のコントロールのデフォルトにはしません。
• 退場アニメーションは入場アニメーションより速くします。目安として、入場時間の約 75% が適切です。
• 押下時の動きは、戻るときより速くします。押し下げる反応は即時に感じられるようにし、元に戻る動きは少し柔らかくしてかまいません。
• 必要に応じて、最初のツールチップやホバーで表示される補助情報には遅延を設定します。ただし、関連する次の表示は大幅に速くするか即時にして、インターフェースがもたついて感じられないようにします。
• 長いスタッガー表示は避けるべきです。最後の項目が気まずいほど遅れて表示されないよう、スタッガー全体の時間に上限を設けます。

4. プロパティの選択とパフォーマンス

• transform と opacity のアニメーションを優先します。
• 強い理由があり、対象のサーフェスが小さい場合を除き、width、height、top、left、padding、margin、border-width など、レイアウト負荷の大きいプロパティのアニメーションは避けます。
• アコーディオンのような高さの遷移では、可能な場合、生の height アニメーションではなく、grid-template-rows または同等のレイアウトに配慮したパターンを優先します。
• レイアウトに影響しない表示効果が必要な場合は、clip-path、マスク、またはコンポジットによる表示を使います。
• メインスレッドがビジー状態の場合や、コンポーネントが頻繁にアニメーションする場合は、ハードウェアに適した transform を使います。
• will-change は控えめに使い、アニメーションが差し迫っている場合、または必要性が確認されている場合に限ります。
• ドラッグ処理中は、遅延が発生する場合、すべてのフレームでコストの高い CSS 変数やレイアウト再計算を経由するアニメーション設定を避けます。
• スクロールをトリガーとする動きには Intersection Observer を優先し、一度だけ実行すればよい場合は、動きの完了後に監視を停止します。

5. Transform とスケールの手法

• ボタンやチップの押下フィードバックでは、scale(0.97) を有力な初期値として使います。
• scale(0) から表示するアニメーションは避けます。要素に現実味のある存在感を保たせるため、scale(0.95) 以上から始めます。
• 動きが要素やビューポートのサイズに合わせて変化する必要がある場合は、パーセントベースの translate 値を使います。
• 動きの起点を意識します。
  • メニューやツールチップは、トリガーの端から現れるようにします
  • ドロワーやシートは、固定された側から動くようにします
  • 浮き上がるカードは、現在の面から持ち上がるように感じられる動きにします
• スケールは子要素にも影響します。スケールの変化幅が大きすぎると、テキストやアイコンがぼやけたり歪んだりすることがあります。
• 3D transform は、空間の理解を助ける場合や、明確な楽しさを加える場合にのみ使います。単独で派手に見えるという理由だけで preserve-3d を使わないでください。

6. ジェスチャーとインタラクションのパターン

• インタラクティブなアニメーションは、途中で中断できるようにします。新しい操作の意図を示すために、動きが終わるまでユーザーを待たせてはいけません。
• スワイプによる閉じる操作、シートのスナップなどのジェスチャーには、距離だけでなく距離と速度を使います。
• 境界付近には摩擦や減衰を加え、ドラッグが急停止するのではなく抵抗を感じるようにします。
• スクロールとドラッグの競合には意図的に対処します。入れ子になったサーフェスが入力を奪い合っているように感じられてはいけません。
• ドラッグ操作を実装する際は、ポインターキャプチャや同等のジェスチャー所有権など、堅牢なポインター処理を使います。
• 影やわずかなスケール、レイヤーの引き上げといった奥行きの手がかりを使って、ドラッグ中の項目が浮き上がって見えるようにします。
• サーフェスを停止位置より先までドラッグできる場合は、ジェスチャーが急に阻止されたように感じられないよう、制御された抵抗を加えます。
• スナップポイントは、速度を考慮し、意図を持って設定します。根拠のない見えない壁のようにしてはいけません。

7. アクセシビリティと仕上げ

• 常に prefers-reduced-motion を尊重してください。
• モーションを減らす場合は、フィードバックをなくすのではなく、通常は動きを簡略化してください。可能であれば、大きな空間移動を、不透明度、ぼかし、ハイライト、または短いトランジションに置き換えます。
• フォーカス状態、進行状況、読み込みのフィードバック、成功またはエラーの通知など、機能上の手がかりを維持してください。
• 状態間の切り替わりが唐突に感じられる場合は、ぼかしを慎重に使ってなじませてください。
• スタガーは装飾ではなく、要素の表示を演出する目的で意図的に使ってください。小さなリストには効果的ですが、大きなリストには通常適しません。
• スクロール連動の表示は、ユーザーが要素を通り過ぎる前に始めつつ、スクロールとのつながりが感じられなくなるほど早くならないようにしてください。
• トリガーとフローティングサーフェスの間のホバー領域を確保し、ポインターの移動中にツールチップ、メニュー、ポップオーバーが誤って閉じないようにしてください。
• トーストのスタックには、オフセット、スケール、不透明度を使うことで、雑然とさせずに奥行きを表現できます。
• コンパクトな画面やタッチ対応の環境でも、広いレイアウトと同様に、モーションへの感受性を尊重してください。ジェスチャー主体の動きは、やりすぎると特に不快に感じられることがあります。

アニメーションの実装

以下のカテゴリーに沿って、体系的にモーションを追加してください。

入口のアニメーション

• ページ読み込みの演出：理解を助ける場合に限ってスタガーを使い、演出全体は短くまとめます
• ヒーローセクション：製品のトーンに合う場合は、主要なメッセージが際立つ入口のアニメーションを設定します
• コンテンツの表示：Intersection Observer を使ったスクロール連動のアニメーション
• モーダル／ドロワーの表示：スムーズなスライドとフェード、背景のフェード、フォーカス管理

マイクロインタラクション

• ボタンのフィードバック：
  • ホバー：操作しやすさが向上する場合に限り、控えめなスケール、色の変化、またはシャドウの変化を使います
  • クリック／押下：素早く縮小してから拡大する動き、押し込まれる感覚、または奥行きの変化を加えます
  • 読み込み：スピナーまたはパルス状態
• フォーム操作：
  • 入力欄のフォーカス：気が散らない範囲でフォーカスを明確にする、ボーダー、背景、または浮き上がりのトランジション
  • バリデーション：装飾的な動きを加える前に、色、アイコン、またはテキスト状態の変化で明確に示します
• トグルスイッチ：スムーズなスライドと色のトランジション
• チェックボックス／ラジオボタン：タイミングを短く保ちながら、状態の変化を明確に示します
• いいね／お気に入り：製品のトーンに合う場合に限り、小さなスケール変化やアイコンの動きを加えます

状態のトランジション

• 表示／非表示：即時に切り替えず、フェードとスライドを使い、適切なタイミング（200〜300ms）にします
• 展開／折りたたみ：オーバーフローを処理しながら、レイアウトに無理のない開閉トランジションを使います。効果的な場合はアイコンを回転させます
• 読み込み状態：スケルトンスクリーンのフェード、スピナーのアニメーション、プログレスバー
• 成功／エラー：色のトランジション、アイコンのアニメーション、穏やかなスケールのパルス
• 有効化／無効化：不透明度のトランジション、カーソルの変化

ナビゲーションとフロー

• ページ遷移：ルート間のクロスフェード、連続性が明確になる場合に限った共有要素のトランジション
• タブの切り替え：インジケーターのスライド、コンテンツのフェード、clip-path、またはその他の素早い方向性のある手がかり
• カルーセル／スライダー：スムーズな変形、スナップ位置、慣性、入力を中断できる操作
• スクロールエフェクト：視差レイヤー、状態が変化するスティッキーヘッダー、スクロール進行状況インジケーター

フィードバックとガイダンス

• ホバー時のヒント：ツールチップのフェードイン、カーソルの変化、要素のハイライト
• ドラッグ＆ドロップ：持ち上がる効果（シャドウとスケール）、ドロップゾーンのハイライト、スムーズな位置の変更。アイテムが z 軸方向に手前へ飛び出すように感じられる動きにします
• コピー／貼り付け：貼り付け時に短くハイライトを表示し、「コピーしました」と確認します
• フォーカスの流れ：フォームまたはワークフロー内の経路をハイライトします

奥行きと浮き上がりのモーション

• 浮き上がった要素は、ユーザーに近づくように動かしてください
• 押された要素は、内側または下方向に動くようにしてください
• 状態を伝えるために、スタイルだけでなく、シャドウと動きを組み合わせてください
• モーションの強調度は、色やタイポグラフィに使う階層の考え方に合わせてください

喜びを感じる瞬間

• 空の状態：イラストに控えめな浮遊アニメーションを加えます
• アクション完了時：紙吹雪、チェックマークの演出、成功を祝う表現を加えます
• イースターエッグ：発見を楽しめる隠しインタラクションを用意します
• コンテキストに応じたアニメーション：天候の演出、時間帯に応じたテーマ、季節感のある演出を加えます

技術的な実装

アニメーションごとに適切な手法を使用してください。

タイミングとイージング

目的別の持続時間：

• 100-150ms：即時フィードバック（ボタンの押下、切り替え）
• 200-300ms：状態の変化（ホバー、メニューを開く）
• 300-500ms：レイアウトの変化（アコーディオン、モーダル、ドロワー）
• デフォルトでは最大500ms：本当に必要な大きな画面遷移

イージングカーブ（CSS のデフォルトではなく、こちらを使用してください）：

/* Recommended - natural deceleration */
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);    /* Smooth, refined */
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);   /* Slightly snappier */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);     /* Confident, decisive */
--ease-in-out-standard: cubic-bezier(0.65, 0, 0.35, 1); /* Reversible movement */
--ease-sheet-standard: cubic-bezier(0.32, 0.72, 0, 1);   /* Sheets / drawers */

/* AVOID - feel dated and tacky */
/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */
/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */

退場アニメーションは、登場アニメーションより速くします。 登場時の持続時間の約75%を使用してください。

CSS アニメーション

/* Prefer for simple, declarative animations */
- transitions for state changes
- @keyframes for complex sequences
- transform + opacity first (GPU-friendly)
- Tailwind utilities when the project already uses Tailwind

JavaScript アニメーション

/* Use for complex, interactive animations */
- Web Animations API for programmatic control
- Framer Motion / Motion for React
- GSAP for complex sequences

デフォルトのルール：ホバー、押下、表示、またはモーション軽減時の代替処理を最新の CSS や Tailwind のユーティリティで簡潔に表現できる場合は、Motion に切り替える前に、まずその方法を優先してください。

パフォーマンス

• GPU アクセラレーション：transform と opacity を使用し、レイアウトプロパティは避けます
• will-change：負荷の高いアニメーションが明確な場合に限り、控えめに追加します
• 描画を減らす：再描画を最小限に抑え、適切な場合は contain を使用します
• FPS を監視する：対象デバイスで60fpsを維持できるようにします
• インタラクションを優先する：頻繁に使うプロダクトの操作は、性能の低いデバイスでも応答性を保つ必要があります

アクセシビリティ

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

大きな動きはすべて削除するのではなく、短いフェード、ハイライト、ぼかしの切り替え、または即時の状態変更に置き換えることを優先してください。

便利なデフォルト値

これらを出発点として使用し、状況に応じて調整してください。

値	適したデフォルトの用途
scale(0.97)	ボタンやチップを押したときのフィードバック
scale(0.95)	登場時に自然に見える最小の拡大率
200ms	標準的な UI の切り替え
300ms	一般的な UI モーションのソフト上限
500ms	大きなシート／ドロワーの切り替えの上限
cubic-bezier(0.32, 0.72, 0, 1)	ドロワー／ボトムシートのイージング
10-16px	トーストスタックのオフセットの開始範囲
~100px from viewport edge	スクロール時の表示を開始する位置の目安

絶対にしてはいけないこと：

• バウンスや弾性のあるイージングカーブをデフォルトで使用すること。アニメーション自体に注目が集まってしまいます
• transform や opacity で代替できる場合に、width、height、top、left などのレイアウトプロパティをアニメーションさせること
• 日常的なフィードバックに長い持続時間を使うこと。すぐに反応が遅いと感じられます
• 目的なくアニメーションさせること。すべてのアニメーションには理由が必要です
• prefers-reduced-motion を無視すること。これはアクセシビリティ違反です
• 何もかもアニメーションさせること。アニメーション疲れにより、インターフェースが煩わしく感じられます
• モーションが終わるまでユーザーを待たせること
• 弱い構造、不明瞭な階層、遅いデータ取得をモーションでごまかすこと
• 慣性、減衰、スクロールとの競合を考慮しないジェスチャー処理をリリースすること

品質の確認

アニメーションを十分にテストしてください。

• 60fpsでスムーズ：対象デバイスでカクつかない
• 自然な動き：イージングカーブが機械的ではなく、自然に感じられる
• 適切なタイミング：速すぎず（唐突にならず）、遅すぎない（もたつかない）
• 即時の応答：入力に対してすぐに視覚的な反応がある
• 必要に応じて中断できる：新たな操作意図で進行中のモーションを上書きできる
• ジェスチャーの品質：ドラッグ、スワイプ、スナップ、閉じる操作に物理的な一貫性がある
• モーション軽減が機能する：アニメーションが適切に無効化または簡略化される
• 操作を妨げない：アニメーション中や終了後にユーザーが操作できる
• 価値を加える：インターフェースをわかりやすく、またはより魅力的にする

覚えておいてください。最良の UI アニメーションは、たいてい注目を集めるのではなく、自然で必然的に感じられるものです。目的を持ってアニメーションを作り、応答性を調整し、アクセシビリティを尊重し、モーションでプロダクトを支えましょう。モーション自体を主役にしてはいけません。