CSS View Transitions API完全攻略！SPAでもMPAでも滑らかなページ遷移を実現する新常識

📖 推定読了時間：約6分

ネイティブアプリのような「カードをタップすると画像がふわっと拡大して詳細画面に変わる」シームレスな画面遷移。これをWebサイトで実現しようとしたとき、これまではReactやVueでSPA（シングルページアプリケーション）を組み、Framer Motionのような重厚なJavaScriptアニメーションライブラリと格闘するのが当たり前でした。

しかし、W3Cで策定され主要ブラウザで実装が進むWeb標準仕様「CSS View Transitions API」の登場により、その苦労は過去のものになろうとしています。SPAはもちろん、なんと通常のHTMLリンクで遷移するマルチページ（MPA）であっても、CSSにわずか1行追加するだけで映画のように滑らかなページ遷移アニメーションが実現できるのです。本記事では、このWebアニメーションの新常識を徹底解剖します。

ブラウザが裏で行っている「スナップショット補間」の仕組み

View Transitions APIの最大の発明は、「アニメーションの計算をJavaScriptからブラウザエンジンネイティブへと引き渡したこと」です。

SPAにおいて `document.startViewTransition(() => updateDOM())` を呼び出すと、ブラウザは以下の処理を瞬時に実行します。

• 📸1. 現在のDOMのスナップショットを撮影：遷移前の画面をキャプチャし、テクスチャとして保持。
• 🔄2. コールバック内でDOMを更新：非同期フェッチや状態変更で新しいHTMLを構築。
• 🖼️3. 新画面のスナップショットを撮影：新しいDOMのレンダリング結果をキャプチャ。
• ✨4. 疑似要素ツリーを生成してクロスフェード：`::view-transition-old` と `::view-transition-new` という疑似要素を重ね、GPUアクセラレーションで滑らかにアニメーション実行。

複雑な座標計算やFLIPアニメーション（First, Last, Invert, Play）のロジックを1行も書く必要がありません。CSSアニメーションの基礎からモダンなUIインタラクション設計までを深く学びたい方は、モダンCSSアニメーションUIインタラクション実践書を手元に置いておくと、現場での引き出しが一気に広がります。

MPA（マルチページ）でも動く！CSS1行の奇跡

さらに驚くべき進化が「Cross-Document View Transitions（同一オリジン間のMPA遷移対応）」です。WordPressや静的HTMLサイトのように、リンクをクリックして新しいURLへページ全体をリロードする構成であっても、CSSに次の記述を足すだけで即座に滑らかな遷移が発動します。

@view-transition {
  navigation: auto;
}

ユーザーがリンクをクリックすると、ブラウザが自動的に旧ページから新ページへのスナップショット遷移を処理し、白画面のフラッシュ（画面のチラつき）なしでアプリのようなシームレスな画面転換が行われます。モダンなレイアウト設計と組み合わせるなら、モダンCSSグリッドデザインパターン設計ハンドブックのレイアウト手法と連動させることで、雑誌のような洗練されたUIを構築できます。

`view-transition-name` で特定のパーツをモーフィングさせる

画面全体をフェードさせるだけでなく、一覧画面の「商品サムネイル画像」を詳細画面の「メインヒーロー画像」へと滑らかに変形・拡大移動させたい場合は、双方の要素に同じ `view-transition-name` を指定します。

/* 一覧ページのカード画像 */
.card-thumbnail {
  view-transition-name: product-hero-image;
}

/* 詳細ページのメイン画像 */
.detail-hero-image {
  view-transition-name: product-hero-image;
}

名前が一致している要素同士は、ブラウザが位置・サイズ・アスペクト比の差分を自動計算し、吸い付くようにモーフィングアニメーションを実行してくれます。

まとめ

かつてはフロントエンド開発者にとって最も骨の折れる作業の一つだった画面遷移アニメーションが、CSSとWeb標準APIの進化によって、誰でも数行で書ける時代へと突入しました。ライブラリの肥大化によるバンドルサイズ増加やパフォーマンス低下を気にすることなく、ユーザーを魅了するリッチなWeb体験を提供できます。

個人ブログからコーポレートサイト、Webアプリケーションまで、ぜひ View Transitions API を導入して、ワンランク上の洗練されたUIを実現してみてください！