transitions-dev

Transitions.dev

意味のある CSS カスタムプロパティを使い、t-* セレクターの名前空間にまとめた、持ち運び可能な CSS トランジションを 12 種類用意しています。貼り付けてすぐ使えます。スニペットを貼り付け、ドキュメントに記載された HTML フックを設定すれば完了です。フレームワークへの依存はなく、デモ専用のマークアップも不要です。また、すべてのスニペットには prefers-reduced-motion のガードが含まれています。

クイックリファレンス

トランジション	用途	リファレンス
カードのリサイズ	レイアウト状態が変化したときに、コンテナーの幅や高さを滑らかに変化させます。	01-card-resize.md
数値のポップイン	数値が更新されたとき、各桁をぼかしながらスライドさせて再表示します。	02-number-pop-in.md
通知バッジ	小さなバッジをトリガー上にスライドさせ、ドットをポップさせます。	03-notification-badge.md
テキスト状態の切り替え	ぼかしながら上下に移動するトランジションで、テキストをその場で切り替えます。	04-text-states-swap.md
メニューのドロップダウン	トリガーを起点に広がる、起点を考慮したドロップダウンを開きます。	05-menu-dropdown.md
モーダルの開閉	モーダルダイアログを拡大して開き、閉じるときはより穏やかに縮小します。	06-modal.md
パネルの表示	ぼかしを伴うトランジションで、パネルを領域内へスライドさせます。	07-panel-reveal.md
ページの左右切り替え	左右に並ぶ 2 つのページ間（リスト ↔ 詳細、ステップ 1 ↔ ステップ 2）をスライドして切り替えます。	08-page-side-by-side.md
アイコンの切り替え	同じ位置にある 2 つのアイコンを、ぼかしと拡大縮小を伴ってクロスフェードします。	09-icon-swap.md
成功チェック	フェード＋回転＋Y 軸方向の上下移動＋パスのストローク描画を組み合わせ、操作の完了を演出します。	10-success-check.md
アバターグループのホバー	項目が並ぶ列に、距離に応じて浮き上がる動きを加え、戻るときは弾むようなスプリング効果を付けます。	11-avatar-group-hover.md
エラー状態のシェイク	セグメントごとの cubic-bezier によるシェイクと、自動で元に戻るボーダー＋メッセージを適用します。	12-error-state-shake.md

選択ルール

ユーザーがトランジションを求めたら、まず画面上で見える UI 要素を確認し、次に動作で照合します。

• トリガー＋上に浮かぶ小さなドット → 通知バッジ。
• トリガー＋そこから広がるサーフェス → ドロップダウン（アンカー付きで、起点を考慮）またはモーダル（中央配置で、アンカーなし）。
• ページ内の領域にスライドして入るサーフェス → パネルの表示。
• 2 つの画面、リスト ↔ 詳細、またはステップ 1 ↔ ステップ 2 → ページの左右切り替え。
• 幅または高さが変化する要素 → カードのリサイズ。
• その場でテキスト内容が変わる要素 → テキスト状態の切り替え。
• 同じ位置にある 2 つのアイコン → アイコンの切り替え。
• 数値の更新 → 数値のポップイン。
• 確認／成功／「完了」の瞬間（チェックマーク、決済完了、ファイルのアップロード） → 成功チェック。
• 横並びの項目にカーソルを合わせる操作（アバター、チップ、セグメントボタン、タグピル） → アバターグループのホバー。
• フォームの検証エラー／「これは間違いです」というフィードバック（無効なフィールド、誤った PIN、重複した名前） → エラー状態のシェイク。

複数のトランジションが当てはまりそうな場合は、デザイン上、より大がかりなサーフェスが明確に必要とされていない限り、負荷の低いものを優先してください（パネルの表示よりカードのリサイズ、モーダルよりドロップダウン、モーダル全体を使った演出より成功チェック）。成功チェックはアニメーションのみです。スピナーからチェックに切り替える必要もある場合は、アイコンの切り替えと組み合わせてください。

共通のインストール

この :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) ブロックを残してください。すべてのスニペットに含まれています。削除すると、コンポーネントがアクセシビリティ監査に合格しなくなります。
5. JS が必要なトランジション（ドロップダウン、モーダル、テキストの切り替え、数値のポップイン、ページスライド、成功チェック、アバターグループのホバー、エラー状態のシェイク）では、リファレンスファイルの短いオーケストレーションスニペットをコピーし、ユーザーの DOM に合わせてセレクターを調整します。getComputedStyle(...)getPropertyValue("--…") による時間の読み取りを残し、期間が :root の値と同期するようにしてください。

差分は小さく保ちます。トランジションの導入に必要なファイルだけを編集してください。ユーザーの既存の変数名を変更したり、関係のない CSS を再フォーマットしたり、モーションライブラリを追加したりしないでください。

よくある間違い

• ドロップダウン／モーダルの閉じる状態のクラス削除を取り除く — .is-closing を削除する setTimeout がないと、次に開いたとき、閉じるときのスケールから始まり、開く前の通常のスケールから始まりません。
• テキストの切り替え、数値のポップイン、成功チェックの再生、エラー状態のシェイクでリフローを忘れる — クラス／属性の削除と再追加の間にある void el.offsetWidth（または offsetHeight）によって、アニメーションが確実に再生されます。
• 内側の要素ではなく、単一のコンテナをアニメーションさせる — バッジではトリガーではなくドットを、ページスライドではコンテナではなくページセクションをアニメーションさせます。
• transition: … を transition: all に置き換える — 関係のないスタイル変更が意図せず適用されないよう、各スニペットでは対象のプロパティを明示的に列挙しています。
• 成功チェックの stroke-dasharray を固定値にする — スニペットでは 20 をプレースホルダーとして使用しています。対象のパスに合わせて、path.getTotalLength() の値を切り上げて置き換えてください。そうしないと、ストロークが最初から一部表示されたり、描画されすぎたりします。
• アバターグループのホバーで CSS に transition-timing-function を設定する — 弾むようなイーズアウトが mouseleave のときだけ適用されるようにするには、--shift／--scale-active を設定する前に、JS でインライン指定する必要があります。
• エラー状態のシェイクで .is-error と .is-shaking を1つのクラスにまとめる — これらを分離しておくことで、エラー表示全体をちらつかせることなく、削除 → リフロー → 再追加の手順でシェイクを再生できます。

リファレンスファイル

• 01-card-resize.md — カードのサイズ変更
• 02-number-pop-in.md — 数値のポップイン
• 03-notification-badge.md — 通知バッジ
• 04-text-states-swap.md — テキスト状態の切り替え
• 05-menu-dropdown.md — メニューのドロップダウン
• 06-modal.md — モーダルの開閉
• 07-panel-reveal.md — パネルの表示
• 08-page-side-by-side.md — ページの横並び表示
• 09-icon-swap.md — アイコンの切り替え
• 10-success-check.md — 成功チェック
• 11-avatar-group-hover.md — アバターグループのホバー
• 12-error-state-shake.md — エラー状態のシェイク
• _root.css — 直接インポートできる、ユニバーサルインストールブロック単体のファイル。