View Transitions APIでページ遷移を美しくする方法【2026年版】

この記事の対象: ブラウザネイティブのページ遷移アニメーションに興味があるフロントエンドエンジニア
読了時間: 約5分

ページ遷移時にフワッとフェードしたり、要素がスライドして入れ替わったり——これまでJavaScriptライブラリに頼っていたページ遷移アニメーションが、ブラウザネイティブのAPIで実現できるようになりました。

View Transitions APIは、少量のCSSとJavaScriptで美しいページ遷移を実装できる新しいAPI です。

View Transitions APIとは

View Transitions APIは、DOM の状態変化をスナップショットとして取得し、自動的にクロスフェードするブラウザネイティブの仕組みです。

SPAでのビュー切り替えだけでなく、MPA（通常のページ遷移）にも対応しており、特別なフレームワークなしでページ遷移アニメーションを実装できます。

ブラウザ対応状況（2026年時点）

• Chrome / Edge: 完全対応（SPA + MPA）
• Safari: 対応（Safari 18〜）
• Firefox: 対応（Firefox 130〜）

2026年時点で主要ブラウザすべてが対応しており、実務での使用が現実的になっています。

基本の使い方

document.startViewTransition()（SPA向け）

// ボタンクリックでビュー切り替え
document.querySelector('.nav-link').addEventListener('click', async (e) => {
  e.preventDefault();

  // View Transition API に対応しているか確認
  if (!document.startViewTransition) {
    updateDOM(); // 非対応の場合は通常の更新
    return;
  }

  const transition = document.startViewTransition(() => {
    updateDOM(); // DOM を更新する関数
  });

  await transition.finished;
});

function updateDOM() {
  // ページの内容を更新する処理
  document.querySelector('main').innerHTML = newContent;
}

CSSの::view-transition疑似要素

デフォルトではクロスフェードが適用されますが、CSSでカスタマイズできます。

/* 遷移全体のアニメーション */
::view-transition-old(root) {
  animation: fade-out 0.3s ease;
}

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

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

要素ごとの遷移名指定

特定の要素にview-transition-nameを指定すると、その要素だけ個別のアニメーションを適用できます。

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

/* ヒーロー画像は拡大しながら遷移 */
::view-transition-old(hero) {
  animation: scale-down 0.4s ease;
}

::view-transition-new(hero) {
  animation: scale-up 0.4s ease;
}

MPA（マルチページ）での使い方

通常のHTML間のページ遷移にもView Transitionsを適用できます。

/* 遷移元・遷移先の両ページのCSSに記載 */
@view-transition {
  navigation: auto;
}

/* 遷移アニメーションのカスタマイズ */
::view-transition-old(root) {
  animation: slide-out 0.3s ease;
}

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

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

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

MPAでの使用は@view-transition { navigation: auto; }をCSSに追加するだけで有効になります。

実践例

フェード遷移

最もシンプルで使いやすい遷移。ページ全体がフェードアウト→フェードインで切り替わります。

::view-transition-old(root) {
  animation: 0.25s ease both fade-out;
}
::view-transition-new(root) {
  animation: 0.25s ease both fade-in;
}

スライド遷移

ページが横にスライドして入れ替わる遷移。ニュースサイトやギャラリーに適しています。

GSAPやBarba.jsとの比較

シンプルな遷移ならView Transitions API、複雑なアニメーション制御にはGSAPが適しています。GSAPの基本は「GSAP入門ガイド」をご覧ください。

まとめ

View Transitions APIのポイントをまとめます。

• ブラウザネイティブのページ遷移アニメーション API
• SPA/MPA両方に対応
• CSSの疑似要素でアニメーションをカスタマイズ
• view-transition-nameで要素ごとの個別遷移が可能
• シンプルな遷移には最適、複雑な演出にはGSAPを検討