ui-animation

UI アニメーション

基本ルール

• 因果関係を明確にしたり、意図的な楽しさを加えたりするためにアニメーションを使います。
• インタラクションは素早く保ちます（200～300ms。説明を目的とする動きに限り、最大1sまで）。
• キーボード操作（矢印キーによるナビゲーション、ショートカットへの応答、タブ移動／フォーカス）はアニメーションさせないでください。
• CSSを優先し、必要な場合にのみWAAPIまたはJSを使います。
• アニメーションを中断可能にし、入力に応じて動作するようにします。
• prefers-reduced-motion を尊重します（動きを抑えるか無効にします）。

アニメーション対象

• 移動や位置の変化には、transform と opacity のみをアニメーションさせます。
• シンプルな状態フィードバックには、color、background-color、opacity のトランジションを使用できます。
• レイアウトプロパティはアニメーションさせないでください。また、transition: all は使わないでください。
• コアインタラクションでの filter アニメーションは避けてください。避けられない場合は、ぼかしを20px以下に保ちます。
• SVGでは、transform-box: fill-box; transform-origin: center を指定した <g> ラッパーに変形を適用します。
• テーマの切り替え中はトランジションを無効にします。

空間と順序

• transform-origin をトリガー位置に設定します。
• ダイアログやメニューは、scale(0.85-0.9) 前後から開始します。scale(0) は避けてください。
• 表示を段階的に行う場合の間隔は50ms以下にします。

イージングのデフォルト値

• 表示時および transform を使ったホバー時：cubic-bezier(0.22, 1, 0.36, 1)。
• 移動時：cubic-bezier(0.25, 1, 0.5, 1)。
• シンプルなホバー時の色、背景色、透明度の変化：200ms ease。
• UIでは、動きが遅く感じられる ease-in は避けます。

アクセシビリティ

• transform を使う場合は、prefers-reduced-motion で無効にします。
• @media (hover: hover) and (pointer: fine) を使い、タッチデバイスではホバートランジションを無効にします。

パフォーマンス

• ループするアニメーションは、画面外では一時停止します。
• will-change は、大きな動きがある間だけ、また transform／opacity に限って切り替えます。
• アニメーションライブラリでは、位置指定プロパティより transform を優先します。
• CSS変数を使ってドラッグ操作をアニメーションさせないでください。

リファレンス

• スニペットと実践的なヒント：examples.md

ワークフロー

1. 基本ルールを確認してから、examples.md のリファレンススニペットを選びます。
2. 動きを機能的なものに保ち、prefers-reduced-motion を尊重します。
3. レビュー時には、ファイルパスと行番号を示し、具体的な修正案を提案します。