View Transitions API

何を解決するAPIか

画面が切り替わる瞬間に要素をクロスフェードさせたり、カード画像を詳細ページの大画像へシームレスに変形させたりする表現は、従来はFLIP法（First-Last-Invert-Play）を手書きし、transformとopacityをアニメーションさせるJSを大量に書く必要がありました。View Transitions APIは、この「旧状態のスナップショット取得」「DOM更新」「新状態のスナップショット取得」「両者の差分補間」という一連の手順をブラウザ内部のアルゴリズムとして標準化したものです。SPA内のDOM更新（同一ドキュメント遷移）と、通常のページ間ナビゲーション（クロスドキュメント遷移）の両方をカバーします。

同一ドキュメント遷移の内部アルゴリズム

document.startViewTransition(callback) を呼ぶと、ブラウザは以下の順序でステップを踏みます。

1. キャプチャ（旧状態）: view-transition-name が指定された要素それぞれについて、現在のレンダリング結果（ラスタ画像）とボックスのジオメトリ（位置・サイズ・writing-mode等）を記録する。
2. DOM更新: 渡した callback を同期的に実行する。ここでDOM操作・クラス切り替えを行う（非同期処理を含む場合はPromiseを返すとその完了を待つ）。
3. キャプチャ（新状態）: 更新後のレイアウトを確定させ、同じview-transition-nameを持つ要素の新しいジオメトリを取得する。
4. 擬似要素ツリーの構築とアニメーション開始: 新旧のキャプチャから ::view-transition 以下の擬似要素ツリーを生成し、CSSアニメーションとして再生する。

擬似要素ツリー：スナップショットの実体

startViewTransition() が生成する擬似要素は、documentのルートに次のような入れ子構造で挿入されます。

::view-transition
  └─ ::view-transition-group(name)
      └─ ::view-transition-image-pair(name)
          ├─ ::view-transition-old(name)
          └─ ::view-transition-new(name)

view-transition-name を指定していない要素は、既定で root という単一グループにまとめられ、ページ全体がひとつの静止画としてクロスフェードします。個別に動かしたい要素（見出し・カード画像など）にだけ固有の名前を振ると、その要素専用のグループが分離され、他要素と独立して補間されます。

.hero-image {
  view-transition-name: hero;
}

::view-transition-group は新旧ジオメトリの差（位置・サイズ・回転相当の変形）をtransformとwidth/heightの補間として自動生成し、::view-transition-image-pairの内側で ::view-transition-old と ::view-transition-new が既定で相互にクロスフェード（opacityのアニメーション）します。これはすべて実CSSのアニメーションとして走るため、開発者は通常のanimationプロパティで上書き・カスタマイズできます。

レイアウト差分の自動補間の正体

「自動補間される」とは具体的には、新旧2つのキャプチャ画像のボックスサイズ・位置が異なる場合、ブラウザが ::view-transition-group に対して開始時ジオメトリから終了時ジオメトリへの transform（平行移動・拡大縮小）アニメーションを生成することを指します。画像そのものをピクセル単位で再合成しているのではなく、各時点のスナップショットを1枚の合成レイヤーとして扱い、それをアフィン変換で動かしている点が重要です。これにより文字の再レイアウトやリフローを伴わない、コンポジタスレッド寄りの安価なアニメーションになります。

CSSでの制御

擬似要素は通常のCSSセレクタで狙えるため、既定のクロスフェードを上書きできます。

::view-transition-old(hero),
::view-transition-new(hero) {
  animation-duration: 0.4s;
  mix-blend-mode: normal; /* 既定のブレンドを外して二重描画のにじみを防ぐ */
}

/* 特定名だけ動きを変える */
::view-transition-group(hero) {
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) と組み合わせて ::view-transition-group(*) { animation: none !important; } のように無効化するのが、アクセシビリティ上の定石です。遷移全体をJSから中断したい場合は、startViewTransition()が返す ViewTransition オブジェクトの skipTransition() を呼びます。

SPAとMPA（クロスドキュメント）両対応

同一ドキュメント内のstartViewTransition()に加え、クロスドキュメント遷移として通常のページ遷移（別URLへのフルナビゲーション、いわゆるMPA構成）にも同じ仕組みが適用されます。有効化はJS呼び出しではなくCSSの宣言で行います。

/* 遷移元・遷移先の両方のドキュメントに書く必要がある */
@view-transition {
  navigation: auto;
}

navigation: auto を持つ文書間の同一オリジンナビゲーションで、ブラウザは遷移元ページの見た目をキャプチャした直後にアンロードし、新ドキュメントのレンダリング完了後に新状態をキャプチャして同じ擬似要素アルゴリズムを適用します。同一ドキュメント版との違いは、DOM更新のステップが「JSコールバック」ではなく「文書のナビゲーションそのもの」に置き換わる点だけで、擬似要素ツリー・補間・CSS制御の仕組みは共通です。view-transition-name を新旧ページで同じ値にした要素同士（例：一覧の画像と詳細ページの画像）は自動でペアリングされ、変形アニメーションの対象になります。

まとめ