モーション は何をしますか？
モーションは変化を説明し、入力を確認します。どちらも行わない場合は装飾であり、理由が必要です。
1. アニメーションさせるべきか？
| ユーザーが目にする頻度 | 判断 |
|---|---|
| 1日100回以上（ショートカット、パレット切り替え、タイピング） | 絶対にアニメーションさせない |
| 数十回（ホバー、リストナビゲーション、タブ） | ごく小さいか、なし（150ms未満の色・不透明度） |
| 時々（モーダル、ドロワー、トースト、ドロップダウン） | 標準的なトランジション |
| まれ（オンボーディング、成功表示、初回訪問のヒーロー） | 歓喜の余地あり |
キーボードでトリガーされるアクションには絶対にアニメーションを付けない。
2. イージング
- 出現または消滅：強いイーズアウト
cubic-bezier(.23, 1, .32, 1) - 画面上の移動：イーズインアウト
cubic-bezier(.77, 0, .175, 1) - ドロワー/シート：
cubic-bezier(.32, .72, 0, 1) - 色/ホバー：
ease。常時動くもの（マーキー、プログレス）：linear - UIには
ease-inを決して使わない。ユーザーが見ている瞬間に遅く感じられるため。
3. 持続時間
プレス 100-160ms · ツールチップ 125-200ms · ドロップダウン 150-250ms · モーダル/ドロワー 200-400ms · マーケティングヒーロー 最大800ms。終了は開始よりも約20%速く。UIモーションは300ms未満に抑える。
4. 設計ルール
transformとopacityのみアニメーションさせる。width、height、top、left、transition: allは不可。scale(0)から出現させない。scale(.95)+opacity: 0から開始する。- ポップオーバーとメニューはトリガーからスケールする（
transform-originをトリガーに設定）。モーダルは中央に留める。 - ボタン：
:active { transform: scale(.97) }、トランジション120ms。 - ツールチップ：最初の1つは遅延（約400ms）、隣接するものは即座に開く。
- リストの表示は1項目あたり30-50msずつずらし、合計を400ms未満に抑える。
- スクロールリビール：1ページあたり最大1つ、小さな距離（8-16px）、1回のみ実行。すべてのセクションに適用しない。
- スプリング（Motion/Framer、React Spring）：ドラッグ、ジェスチャー、割り込み可能な動きに使用。
{ type: "spring", duration: .4, bounce: .15 }。バウンスは0.1〜0.3に保ち、遊び心のあるサーフェスにのみ使用。 - シンプルな出現/消滅にはCSSトランジションと
@starting-styleを優先。ページ/状態のモーフにはView Transitions APIを。ジェスチャーやシーケンスが必要な場合にのみJSライブラリを使用する。
5. 動きを抑える設定（必須）
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
不透明度の変化と状態の色は維持し、動き、パララックス、シェイクは除去する。
レビュー形式
モーションコードをレビューする際は、表で回答する：| Before | After | Why |、問題ごとに1行。