CSS View Transitions API入門！Web画面遷移をネイティブアプリ並みに滑らかにする方法

📖 推定読了時間：約5分

ネイティブのiOSやAndroidアプリを操作しているとき、一覧画面のサムネイルカードをタップすると、その画像が滑らかに拡大しながら詳細画面へと吸い込まれるように遷移する――そんな心地よいアニメーションをWebサイトでも実現したいと思ったことはありませんか？

かつてのWeb開発では、これを実現するために巨大なJavaScriptフレームワークや複雑なアニメーションライブラリ（Framer Motion等）、仮想DOMの差分計算を駆使しなければならず、実装工数もパフォーマンス負荷も膨大でした。しかし現在、W3C標準仕様としてブラウザに実装された「View Transitions API」によって、この常識が根底から覆りました。

従来の画面遷移と何が違うのか？仕組みの神髄

View Transitions APIの最大の特徴は、「DOMの更新前後の状態をブラウザが自動でスクリーンショット（擬似的なラスタライズ画像）として撮影し、その間をGPU加速でクロスフェードさせる」点にあります。

JavaScriptでDOMを更新する際、以下のようにコールバックをラップするだけで、ブラウザが自動的に新旧画面のトランジションを生成してくれます。

function updateDOM() {
  document.startViewTransition(() => {
    // ここでDOMを書き換える（ページ切り替え、要素追加など）
    renderNewContent();
  });
}

ブラウザ内部では、擬似要素 `::view-transition-old(root)` と `::view-transition-new(root)` が自動生成され、標準のCSSキーフレームアニメーションによって滑らかなフェードイン・フェードアウトが実行されます。

CSSを用いた最新のマイクロインタラクションやUIアニメーション設計を網羅的に学びたい方は、モダンCSSアニメーションUIインタラクション実践書などを手元に置いておくと、現場での表現力が格段に広がります。

要素を自在に変形させる：`view-transition-name` の魔術

画面全体のクロスフェードだけでなく、特定のヘッダー、検索バー、あるいは画像カードだけを「元の位置から移動・拡大させる」ことも可能です。

方法は極めてシンプルで、遷移元と遷移先の対応する要素に同じ `view-transition-name` を指定するだけです。

/* 一覧画面のサムネイル */
.card-thumbnail {
  view-transition-name: hero-image;
}

/* 詳細画面のメインバナー */
.detail-banner {
  view-transition-name: hero-image;
}

これだけで、ブラウザは2つの要素のサイズ・座標（バウンディングボックス）の違いを自動計算し、一切の複雑な幾何学計算コードを書くことなく、美しく吸い込まれるような拡大アニメーションを補間してくれます。

従来の手法とView Transitions APIの機能比較

従来のJavaScriptアニメーション手法とView Transitions APIの主な違いを整理しました。

マルチページ（MPA）にも広がる！CSS宣言だけで遷移する未来

さらに注目すべきは、同一オリジン間の通常ページ遷移（クロスドキュメント遷移）への対応です。CSSに以下の1ルールを追加するだけで、JavaScriptを一切書かなくても、通常の `` タグによるリンク遷移時に自動でトランジションがかかります。

@view-transition {
  navigation: auto;
}

Web標準に基づいたアクセシビリティ対応や、ユーザーの視線誘導を意識したモーションデザインの詳細は、モダンCSSアニメーションUIインタラクション実践書などを参照しながら、過剰にならない上品なアニメーション設計を心がけましょう。

まとめ：Webとネイティブの境界線が完全に消え去る

View Transitions APIの普及によって、「Webサイトは画面遷移で白くチラつくもの」という過去の常識は完全に過去のものになりつつあります。

最小限のコードで極上の操作感をユーザーに届けられるこの新機能を、ぜひあなたのWebサイトやWebアプリケーションに導入してみてください！