Featured image of post View Transitions APIによる滑らかなページ遷移アニメーション Featured image of post View Transitions APIによる滑らかなページ遷移アニメーション
CSS

View Transitions APIによる滑らかなページ遷移アニメーション

View Transitions APIを使った滑らかなページ遷移アニメーションの実装方法を解説。JavaScriptとCSSのみで実現する標準仕様の仕組み、SPAやMPAでの活用テクニック、カスタムアニメーション定義まで実践的に紹介します。

English
  1. ホーム
  2. web
  3. View Transitions APIによる滑らかなページ遷移アニメーション

はじめに

WebサイトやWebアプリケーションにおける「ページ遷移時のアニメーション」は、ユーザー体験（UX）を向上させる重要な要素です。

これまで、画面と画面を滑らかに繋ぐトランジションを実現するためには、Next.jsなどのフレームワークや、Framer Motion、GSAPといった複雑なJavaScriptアニメーションライブラリを利用し、要素のフェードアウトやマウント・アンマウントを制御する必要がありました。

しかし、新しくW3C標準として導入が進んでいる View Transitions API を使用すれば、ブラウザのネイティブ機能によって、ごくわずかなJavaScriptとCSSだけで画面全体の滑らかな切り替えや、要素の位置・サイズ変更の自動補間アニメーションを実装できるようになります。本記事では、この注目のWeb標準APIの基礎を解説します。

1. View Transitions API とは？

View Transitions APIは、「DOMの変更前」と「DOMの変更後」の2つの状態のスクリーンショットをブラウザが内部的にキャプチャし、その間で滑らかなクロスフェードやモーフィングアニメーションを自動実行する機能です。

主な特徴

  • シンプルなコード: アニメーションのキーフレーム定義やタイマー管理をJS側で書く必要がなくなります。
  • 高いパフォーマンス: ブラウザのGPU処理によってアニメーションが実行されるため、コマ落ち（カクつき）が極めて発生しにくいです。
  • SPAおよびMPA（マルチページ）のサポート: 当初はSPA向けにリリースされましたが、現在は通常の静的Webサイト（MPA）におけるページ間遷移のアニメーションサポートも標準化が進んでいます。

2. 最もシンプルな基本の使い方（SPA編）

SPAにおいてDOMを書き換える際のアニメーション実装方法を見てみましょう。

従来のDOM更新

// 単に中身を書き換える（一瞬で切り替わる）
function updateContent() {
  document.querySelector('.content').innerHTML = '<h1>新しいコンテンツ</h1>';
}

View Transitions APIを適用したDOM更新

ブラウザの document.startViewTransition() メソッドの中に、DOMの更新処理をラップして渡すだけです。

function updateContent() {
  // APIがサポートされているかチェック
  if (!document.startViewTransition) {
    document.querySelector('.content').innerHTML = '<h1>新しいコンテンツ</h1>';
    return;
  }

  // アニメーション付きで遷移を実行
  document.startViewTransition(() => {
    document.querySelector('.content').innerHTML = '<h1>新しいコンテンツ</h1>';
  });
}

これだけで、ブラウザは「古い状態」から「新しい状態」へと、デフォルトで自動的に 0.25秒のフェードイン・フェードアウト（クロスフェード） アニメーションを適用してくれます。

3. カスタムアニメーションの適用（CSSでの制御）

デフォルトのフェード以外のアニメーションを適用したい場合、CSSの疑似要素（Pseudo-elements）を使用してスタイルをオーバーライドします。

API実行時、ブラウザはドキュメントの最上部に以下のような一時的な疑似要素ツリーを作成します。

::view-transition
 └─ ::view-transition-group(root)
     └─ ::view-transition-image-pair(root)
         ├─ ::view-transition-old(root)  (変更前の画面)
         └─ ::view-transition-new(root)  (変更後の画面)

例えば、画面が左から右へスライドしながら切り替わるアニメーションを実装したい場合は、CSSに以下のように記述します。

/* デフォルトのフェードアニメーションを無効化し、カスタムキーフレームを適用 */
::view-transition-old(root) {
  animation: 0.3s ease-out both slide-out;
}

::view-transition-new(root) {
  animation: 0.3s ease-out both slide-in;
}

@keyframes slide-out {
  to { transform: translateX(-100%); }
}

@keyframes slide-in {
  from { transform: translateX(100%); }
}

4. パーツごとの個別移行（Hero Animation / ヒーローアニメーション）

View Transitions APIの最も素晴らしい機能の一つが、**「特定のUIパーツ（画像やボタンなど）だけを取り出して、変形しながら移動させるアニメーション（モーフィング）」**を簡単に実現できる点です。

例えば、記事一覧のカードにあるサムネイル画像が、詳細ページを開いたときにそのまま拡大してメイン画像に変形するような演出です。

CSSでの設定方法

移行前と移行後の両方の要素に対して、同一の view-transition-name という一意のCSSプロパティを指定するだけです。

/* リストページのサムネイル画像 */
.card-thumbnail {
  view-transition-name: article-hero-image;
}

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

これだけで、ブラウザは2つの要素が「同じものである」と認識し、ページ遷移時に要素が画面上をスルスルと移動・拡大しながら繋がるアニメーションを自動的に計算し、実行してくれます。

まとめとブラウザ対応状況

View Transitions APIは、現在Chrome、Edge、Safariなどの主要ブラウザで広くサポートされており、Firefoxでも現在実装が進められています。

複雑なライブラリに頼ることなく、CSSベースで軽量かつ滑らかなトランジションをWebサイトに導入できる画期的な技術です。UXの向上を目指し、まずは簡単なフェード効果の適用からプロジェクトに導入してみてはいかがでしょうか。

© 2022 - 2026 たかおの解説