CSS1行で画面遷移を最適化！View Transitions APIで「ふわっと」したアニメーションを作る方法

通常のWebサイト（マルチページアプリケーション：MPA）において、ページを移動する際の滑らかなアニメーションは、View Transitions APIを使って効率的に実装できるようになりました。

これまで、ページをまたいで視覚的な一貫性を保つには、JavaScriptでルーティングを制御するシングルページアプリケーション（SPA）構成を採用するのが一般的でした。
SPAでは、JavaScriptがブラウザの標準的なページ読み込みを遮断し、手動でDOM（HTML要素）を差し替え、ライブラリで座標や透明度を計算するという膨大な実装コストを払うことで、ようやく滑らかな動きを実現していました。

しかし、View Transitions APIの登場により、MPAの伝統的なページ移動（ナビゲーション）を維持したまま、ブラウザの描画システムそのものを活用した遷移制御が可能になりました。
JavaScriptで無理やり要素を動かすのではなく、ブラウザに「古い画面」と「新しい画面」の合成を任せる形になったことで、これまで困難だった「ページをまたぐ滑らかな表現」が、ごくわずかな記述で完結するようになりました。

なお、気になるブラウザのサポート状況については、以下のリンクから確認できます。

Can I use（View Transitions）
https://caniuse.com/cross-document-view-transitions

実際の実装には、以下のコードをCSSに追加するだけです。

CSS

@view-transition {
  navigation: auto;
}

たったこれだけで、ページ遷移時にブラウザが自動でアニメーションを制御してくれるようになります。

View Transitions APIが画面を切り替える仕組み

これまでJavaScriptライブラリがメインスレッドで行っていた画面の差分計算やアニメーションを、ブラウザのレンダリングパイプラインが直接処理できるようになったのが大きな違いです。

画面が切り替わるまでの内部プロセス

navigation: auto を有効にすると、ブラウザは新しいページへのリクエストを受け取った瞬間から、以下の流れで描画をコントロールします。

スナップショットの保存
ページが切り替わる直前の画面を、ブラウザが「1枚の静止画」としてメモリに記録します。

新しいページの準備
裏側で次のページを読み込み、DOMを構築します。ただし、この時点ではまだ画面の書き換え（ペイント）をせず、表示を一時的に待機させます。

専用レイヤーの構築
画面の最前面に、通常のDOMとは切り離された ::view-transition というアニメーション専用の特殊な階層を作り上げます。

新旧画面の合成
保存しておいた「古い画面（::view-transition-old）」と、準備が整った「新しい画面（::view-transition-new）」を重ね合わせ、CSSで指定した通りに画面を入れ替えます。

この一連の挙動をブラウザのレンダリングエンジン側で完結できるため、これまでJavaScriptで行っていた要素の監視や状態管理は不要になります。CSSでスタイルを宣言するだけで、画面の切り替わり方を自由に制御できます。

実装サンプル（MPAでのフェード遷移）

アクセシビリティとパフォーマンスに配慮した、シンプルで汎用性の高い「ふわりと切り替わる」アニメーションの例を紹介します。

まずはHTML。
同じドメイン内に、遷移先となる複数のページを用意します。

注意：実行環境について
View Transitions API はセキュリティ上の理由から、ファイルを直接ブラウザで開く（file://）形式では動作しません。VS Code の「Live Server」拡張機能や、Vite などの開発サーバーを通じた http:// 環境で確認してください。

index.html (Home)

<header>
  <nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
  </nav>
</header>

<main>
  <h1>HOME</h1>
  <div class="box blue"></div>
  <p>Click the link above to see the "fade" effect.</p>
</main>

about.html (About)

<header>
  <nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
  </nav>
</header>

<main>
  <h1>ABOUT</h1>
  <div class="box green"></div>
  <p>The page transition is now handled natively by the browser.</p>
</main>

今回の実装の大きな利点は、アニメーション用の追加コードが必要ない点です。

JavaScriptで画面を書き換える従来のSPA（シングルページアプリケーション）の手法では、要素の動きを追跡するために特定のIDや属性（data-transition等）を付与し、さらにそれらをスクリプトで制御する手間がかかりました。しかし、View Transitions APIはブラウザの標準機能として「リンク移動」そのものをトリガーにするため、シンプルでクリーンなHTMLを維持したまま視覚効果を付与できます。コンテンツの構造を正しく記述するだけで、ブラウザが遷移前後の整合性を補完してくれます。

続いてCSS。
数行の記述を追加するだけで、ページ間の滑らかな遷移が有効になります。

CSS

/* --------------------------------------------------
 * View Transitions API (クロスドキュメント)
 * -------------------------------------------------- */

/* 標準のページ遷移アニメーションを有効化 */
@view-transition {
  navigation: auto;
}

/* 遷移スピード（0.4秒）とイージングのカスタマイズ */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.4s;
  animation-timing-function: ease-in-out;
}

/* --------------------------------------------------
 * 基本スタイリング
 * -------------------------------------------------- */
body {
  padding: 3.75rem;
  line-height: 1.6;
  background-color: #fff;
  color: #1a1a1a;
}

nav {
  display: flex;
  justify-content: flex-end;
  gap: 2rem;
  a {
    text-decoration: none;
    color: #06c;
    font-size: 1.125rem;
    font-weight: 500;
    &:hover {
      text-decoration: underline;
    }
  }
}

h1 {
  font-size: 2rem;
  margin: 1.25rem 0;
}

.box {
  width: 100%;
  height: 220px;
  border-radius: 1rem;
  margin: 0 0 1.25rem;
}

.blue { background-color: #007aff; }
.green { background-color: #34c759; }

p {
  font-size: 1rem;
}

/* アクセシビリティ：視覚効果を減らす設定のユーザーに配慮 */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

このCSSで最も重要なのは、@view-transition ルールによる機能の有効化です。
navigation: auto を指定することで、同じドメイン内でのリンク移動において、ブラウザが自動的に遷移アニメーションを開始するようになります。

また、::view-transition-old(root)（古い画面）と ::view-transition-new(root)（新しい画面）という疑似要素を調整することで、標準のクロスフェードに対して実行時間や動きの質感を変更できます。ここでは 0.4s の ease-in-out を指定し、視覚的に自然でストレスのない速度に調整しました。

最後に、アクセシビリティへの配慮として prefers-reduced-motion メディアクエリを組み込んでいます。OSの設定で「視覚効果を減らす」を選択しているユーザーに対して、アニメーションを即座に無効化する処理は、現代のWeb制作において欠かせない作法といえます。

以下、実際に実装したページ遷移時の動きです。
動画（2分24秒）

簡単に言えば、運用中のサイトのCSSに以下の記述を加えるだけで、ページ遷移を滑らかにできるというわけです。

CSS

/* ページ移動時のアニメーションを有効化 */
@view-transition {
  navigation: auto;
}

/* 遷移スピードと質感の調整 (0.4s) */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.4s;
  animation-timing-function: ease-in-out;
}

/* アクセシビリティ：視覚効果を減らす設定のユーザーに配慮 */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

自由なカスタマイズ

この View Transitions API の大きな特徴は、::view-transition-old(root) や ::view-transition-new(root) に対して、普段使い慣れている CSS アニメーション（@keyframes）をそのまま適用できることです。

標準のクロスフェードだけでなく、例えば「古い画面を左に押し出し、新しい画面を右からスライドさせる」といった動きも、以下のような数行の CSS を追加するだけで実現できます。

CSS

/* 右から左へスライドしながら切り替える例 */
/* スライドしながらフェードアウト・インさせる独自の動き */
@keyframes slide-out {
  to { transform: translateX(-20%); opacity: 0; }
}
@keyframes slide-in {
  from { transform: translateX(100%); }
}

/* 古い画面を左に少し押し出し、新しい画面を右からスライドさせる */
::view-transition-old(root) {
  animation: 0.4s ease-in-out both slide-out;
}

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

このように、ページ全体の動きを自由にコントロールできるため、サイトのブランドや世界観に合わせた独自の演出も容易になります。

さらに踏み込んだ演出：進む・戻るでアニメーションを分ける

さらにこだわりたい場合は、ブラウザの「戻る」ボタンを押したときに、アニメーションの向きを逆にする（左から右へスライドさせる）といった制御も可能です。

2026年現在、この判別をCSSのみで完結させるのは難しいため、数行のJavaScriptを併用するのが確実です。

JavaScriptで移動方向を判定する
全ページ共通のJSファイルに以下を記述し、履歴移動（戻る・進む）の種類に応じて <html> タグへ is-back または is-forward クラスを付与します。

JavaScript

// ページが表示された時に実行
window.addEventListener('pageshow', (event) => {
  const currentIndex = navigation.currentEntry?.index ?? 0;
  // 前回保存したインデックスを取得（デフォルトは0）
  const lastIndex = parseInt(sessionStorage.getItem('nav-index') || '0', 10);
  const navType = navigation.activation?.navigationType;

  // ルート要素のクラスをリセット
  document.documentElement.classList.remove('is-back', 'is-forward');

  // 履歴移動（戻る・進むボタン）の場合の判定
  if (navType === 'traverse') {
    if (currentIndex < lastIndex) {
      document.documentElement.classList.add('is-back');    // 戻る操作
    } else if (currentIndex > lastIndex) {
      document.documentElement.classList.add('is-forward'); // 進む操作
    }
  }

  // 次回遷移の判定用に現在のインデックスを保存
  sessionStorage.setItem('nav-index', currentIndex.toString());
});

// 次の遷移に影響が出ないよう、ページを離れる際にクラスを削除
window.addEventListener('pagehide', () => {
  document.documentElement.classList.remove('is-back', 'is-forward');
});

CSSで「戻る」専用のアニメーションを指定する

通常のリンククリックや「進む」操作では右から左へスライドさせ、is-back クラスがある場合のみ、アニメーションの向きを逆転させます。

CSS

/* --------------------------------------------------
 * 実装例：双方向スライド（進む・戻るの制御）
 * -------------------------------------------------- */

/* --- アニメーションの定義 --- */
/* 右から左へスライド（標準の「進む」動き） */
@keyframes slide-in-right { from { transform: translateX(100%); } }
@keyframes slide-out-left { to { transform: translateX(-20%); opacity: 0; } }

/* 左から右へスライド（「戻る」動き） */
@keyframes slide-in-left { from { transform: translateX(-100%); } }
@keyframes slide-out-right { to { transform: translateX(20%); opacity: 0; } }


/* --- 標準の遷移設定（リンククリック ＆ 履歴で「進む」操作） --- */
/* デフォルト、および .is-forward クラスが付与された際に適用 */
::view-transition-old(root),
.is-forward::view-transition-old(root) { 
  animation: 0.4s ease-in-out both slide-out-left; 
}
::view-transition-new(root),
.is-forward::view-transition-new(root) { 
  animation: 0.4s ease-in-out both slide-in-right; 
}


/* --- 「戻る」時の遷移設定（履歴で「戻る」操作） --- */
/* .is-back クラスがある時だけアニメーションの向きを逆転させる */
.is-back::view-transition-old(root) { 
  animation: 0.4s ease-in-out both slide-out-right; 
}
.is-back::view-transition-new(root) { 
  animation: 0.4s ease-in-out both slide-in-left; 
}

このように、ユーザーの操作に合わせて画面の動く方向を制御することで、Webサイトでありながらネイティブアプリのような直感的な操作感を実現できます。

SEO、AIO、GEO、およびJavaScriptとの整合性

導入にあたっては、検討すべきSEOやパフォーマンスへの影響、および既存のJavaScript実装との兼ね合いといった実務上の注意点もあります。
いくつか重要なポイントを確認しておきましょう。

SEO、生成AI最適化 (AIO / GEO) への影響

Core Web Vitalsへのプラスの影響
JavaScriptによる大規模なDOM再構築（SPAのような挙動）を行わないため、メインスレッドの占有時間（TBT）が減少します。ブラウザのレンダリングエンジンが直接アニメーションを制御するため、描画のガタつき（FPSの低下）も起きにくく、ユーザー体験指標の安定につながります。

情報のクロールと解析
本APIはあくまで「見た目（プレゼンテーション層）」の機能です。h1、nav、main といった文書構造に干渉しないため、GooglebotやAIクローラーによる解析において不利になることはありません。むしろ、快適なユーザー体験を提供するサイトとして、間接的にサイト評価を押し上げる可能性があります。

JavaScript との競合と対策

実行タイミングの制御
ページ遷移時にJavaScriptで動的にDOMを書き換える場合、アニメーションの実行タイミングと重なり、挙動が不安定になることがあります。transition.ready（準備完了）や transition.finished（完了）といったPromiseを活用し、処理の順番を整理する必要があります。

最前面（Top Layer）の制約
アニメーション中の要素は、z-index を無視してブラウザの最前面レイヤーに配置されます。このため、固定ヘッダーやモーダルが意図しない重なり方をするケースがあるため、実機での検証が欠かせません。

これらの特性をあらかじめ押さえておくことで、視覚的な効果だけでなく、技術的にもミスのないサイト構築ができます。単純なページ移動を、サイト全体の品質を高めるきっかけとして活用してみてください。

フォームプラグイン（Contact Form 7など）への影響

WordPressで「Contact Form 7」などのプラグインを使用している場合、送信後にページが切り替わるかどうかが気になるでしょう。
結論から言うと、送信後のリダイレクト設定をしているかどうかがポイントになります。

完了ページへリダイレクトする場合
送信後に「サンクスページ」など別URLへ移動する設定にしているなら、今回のView Transitions APIの対象になります。送信ボタンを押した後、画面が切り替わる瞬間に滑らかなアニメーションが適用されます。

同一ページ内で完了メッセージを出す場合
CF7の標準仕様（ページ移動せず、フォームの下にメッセージが出る挙動）では、View Transitions APIは発火しません。これはJavaScriptによる部分的な書き換えであり、ブラウザの「ページ移動」を伴わないためです。この場合、挙動に変化はなく、今まで通りメッセージが表示されます。

基本的にはフォームの動作を妨げるものではありませんが、送信処理（POSTリクエスト）からリダイレクトまでの待ち時間の見え方など、一度実機で確認しておくと安心です。