Transitions.dev

12 個のポータブルな CSS トランジション。各トランジションは t-* セレクタの下にネームスペースされ、セマンティックな CSS カスタムプロパティを使用しています。ドロップイン対応：スニペットを貼り付け、ドキュメント化された HTML フックを接続するだけで完了。フレームワークの依存なし、デモ固有のマークアップなし、すべてのスニペットに prefers-reduced-motion ガードが付属しています。

クイックリファレンス

トランジション	使用場面	リファレンス
Card resize	コンテナの幅または高さをレイアウト状態の変更時にトゥイーンします。	01-card-resize.md
Number pop-in	数値更新時に各桁をブラー付きスライドで再度表示します。	02-number-pop-in.md
Notification badge	トリガーに小さなバッジをスライドさせ、ドットをポップします。	03-notification-badge.md
Text states swap	テキストをブラー付き上下トランジションでそのまま入れ替えます。	04-text-states-swap.md
Menu dropdown	トリガーから成長する、原点認識型のドロップダウンをオープンします。	05-menu-dropdown.md
Modal open / close	モーダルダイアログをスケールアップし、クローズ時はより柔らかいスケールダウンを行います。	06-modal.md
Panel reveal	パネルを領域にクロスブラー付きでスライドさせます。	07-panel-reveal.md
Page side-by-side	2 つのサイドバイサイドページ間（リスト ↔ 詳細、ステップ 1 ↔ ステップ 2）でスライドします。	08-page-side-by-side.md
Icon swap	同じスロット内の 2 つのアイコンをブラーとスケール付きでクロスフェードします。	09-icon-swap.md
Success check	フェード + 回転 + Y ボブ + パスストロークドローを合成して、アクション完了を祝います。	10-success-check.md
Avatar group hover	アイテムの行に距離減衰リフトをかけ、戻す時にバウンシースプリング効果を加えます。	11-avatar-group-hover.md
Error state shake	セグメントごとの cubic-bezier シェイク、自動リバートするボーダーとメッセージ付き。	12-error-state-shake.md

決定ルール

ユーザーがトランジションを要求したときは、まず見える UI 要素、次に動詞に対して照合します：

• トリガー + 上部に浮く小さなドット → notification badge。
• トリガーから成長する表面 → ドロップダウン（アンカー付き、原点認識型）またはモーダル（中央配置、アンカーなし）。
• ページの領域にスライドしてくる表面 → panel reveal。
• 2 つの画面、リスト ↔ 詳細またはステップ 1 ↔ ステップ 2 → page side-by-side。
• 要素の幅または高さが変わる → card resize。
• 要素のテキストコンテンツが現在地で変わる → text states swap。
• 同じスロット内の 2 つのアイコン → icon swap。
• 数値が更新される → number pop-in。
• 確認 / 成功 / 「完了」の瞬間（チェックマーク、支払い処理済み、ファイルアップロード完了） → success check。
• 水平スタック内のアイテムにホバー（アバター、チップ、セグメント化されたボタン、タグピル） → avatar group hover。
• フォーム検証エラー / 「これは間違い」というフィードバック（無効なフィールド、間違った PIN、重複した名前） → error state shake。

2 つのトランジションが適用可能な場合、デザインが明らかに重い表面を要求しない限り、オーバーヘッドが低いものを優先します（panel reveal より card resize、モーダルより dropdown、フル modal 祝い より success check）。success check はアニメーションのみです。スピナーからチェックマークへの入れ替えも必要な場合は、icon swap と組み合わせてください。

ユニバーサルインストール

この:root ブロックをプロジェクトに一度ドロップします。すべてのトランジションスニペットはこれらのセマンティック名から読み込まれます。後で追跡する必要があるコンポーネント固有の値はありません。

/* transitions-dev — copy this :root block into your project once.
   Every transition snippet reads from these semantic names. */
:root {
  /* Card resize */
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Number pop-in */
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  /* Notification badge */
  --badge-slide-dur: 260ms;
  --badge-pop-dur: 500ms;
  --badge-pop-close-dur: 180ms;
  --badge-fade-dur: 400ms;
  --badge-fade-close-dur: 180ms;
  --badge-blur: 2px;
  --badge-offset-x: -8.2px;
  --badge-offset-y: 12.4px;
  --badge-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --badge-pop-ease: cubic-bezier(0.34, 1.36, 0.64, 1);
  --badge-close-ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Text states swap */
  --text-swap-dur: 200ms;
  --text-swap-translate-y: 8px;
  --text-swap-blur: 2px;
  --text-swap-ease: ease-out;
  /* Menu dropdown */
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Modal open / close */
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Panel reveal */
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-translate-y: 100px;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Page side-by-side */
  --page-slide-dur: 200ms;
  --page-fade-dur: 200ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Icon swap */
  --icon-swap-dur: 200ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
  /* Success check */
  --check-opacity-dur: 550ms;
  --check-rotate-dur: 550ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 450ms;
  --check-y-amount: 40px;
  --check-blur-dur: 500ms;
  --check-blur-from: 10px;
  --check-path-dur: 550ms;
  --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
  /* Avatar group hover */
  --avatar-lift: -4px;
  --avatar-dur: 320ms;
  --avatar-scale: 1.05;
  --avatar-falloff: 0.45;
  --avatar-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
  --avatar-ease-out: cubic-bezier(0.34, 3.85, 0.64, 1);
  /* Error state shake */
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-hold: 3000ms;
  --revert-dur: 280ms;
}

transitions.dev のライブデモで使用される --pX-* ソーストークンは、ここでは意図的にエクスポートされていません。調整可能な値は、ユーザーがデザイン用語を所有できるようにセマンティック名（--badge-*、--dropdown-*、--modal-* など）に名前が変更されています。

出力フォーマット

トランジションをユーザーのプロジェクトに挿入するときは、以下の手順に従います：

1. 上記の :root ブロックを追加します。ユーザーのグローバルスタイルシートに追加しますが、まだそこにない場合のみです。ユーザーがすでにユニバーサルインストールブロックを一度インポートしている場合は、重複させないでください。
2. 選択したトランジションの CSS をリファレンスファイルから逐語的に貼り付けます。セレクタを書き直さないでください。トランジションをショートハンドに折りたたまないでください。will-change を削除しないでください。スニペットは調整およびテスト済みです。
3. ドキュメント化された HTML フックを接続します — クラス名（.t-dropdown、.t-modal、.t-success-check、.t-avatar、.t-input など）および状態属性（data-open、data-state、data-page、.is-open、.is-closing、.is-exit、.is-enter-start、.is-animating、.is-error、.is-shaking）。
4. **@media (prefers-reduced-motion: reduce) ブロックを保持します。**すべてのスニペットに 1 つ付属しています。それを削除するとコンポーネントはアクセシビリティ監査に失敗します。
5. JS が必要なトランジション（dropdown、modal、text swap、number pop-in、page slide、success check、avatar group hover、error state shake）については、リファレンスファイルから小さなオーケストレーションスニペットをコピーし、ユーザーの DOM に合わせてセレクタを適応させます。タイミング読み込み（getComputedStyle(...)getPropertyValue("--…")）を保持して、デュレーションが :root 値と同期したままになるようにします。

diff を小さく保ちます：トランジション導入に必要なファイルのみ編集します。ユーザーの既存変数を名前変更しないでください。関連のない CSS をリフォーマットしないでください。モーションライブラリを引き込まないでください。

避けるべき一般的な間違い

• ドロップダウン/モーダルのクローズ状態クラスクリーンアップを削除する — .is-closing を削除する setTimeout なしでは、次のオープンはクローズスケールではなく、休止前オープンスケールからジャンプします。
• text swap、number pop-in、success check リプレイ、error state shake のリフローを忘れる — クラス/属性削除と再追加の間の void el.offsetWidth（または offsetHeight）は、アニメーションが確実にリプレイされることを保証します。
• 単一コンテナをアニメーション化する（内部パーツではなく） — バッジの場合、ドットをアニメーション化します（トリガーではなく）。ページスライドの場合、ページセクションをアニメーション化します（コンテナではなく）。
• transition: … を transition: all に置き換える — すべてのスニペットは正確なプロパティを列挙しているため、無関連のスタイル変更が無料で乗り込まないようにします。
• success check の stroke-dasharray をハードコーディングする — スニペットはプレースホルダーとして 20 を付属しています。あなたのパスで path.getTotalLength() を小数点以下なしに置き換えてください。そうしないとストロークが事前に表示されたり、オーバードローされたりします。
• avatar group hover の CSS に transition-timing-function を設定する — --shift / --scale-active 書き込みが発生する前に JS でインラインに設定する必要があり、バウンシーease-out は mouseleave でのみ適用されます。
• error state shake の .is-error と .is-shaking を 1 つのクラスに混ぜる — 直交したままにすることで、シェイクを（削除 → リフロー → 再追加）全体のエラー処理をちらつかせずにリプレイできます。

リファレンスファイル

• 01-card-resize.md — Card resize
• 02-number-pop-in.md — Number pop-in
• 03-notification-badge.md — Notification badge
• 04-text-states-swap.md — Text states swap
• 05-menu-dropdown.md — Menu dropdown
• 06-modal.md — Modal open / close
• 07-panel-reveal.md — Panel reveal
• 08-page-side-by-side.md — Page side-by-side
• 09-icon-swap.md — Icon swap
• 10-success-check.md — Success check
• 11-avatar-group-hover.md — Avatar group hover
• 12-error-state-shake.md — Error state shake
• _root.css — ユニバーサルインストールブロック単独。直接インポート可能な状態です。