View Transition API でページ遷移アニメーションを試してみた
目次
最近取り組んでいた案件で、ページ遷移にアニメーションを取り入れる実装を行いました。
フロントエンドは Next.js を用いて構築されており、クライアントの要望に沿った演出を実現するために、どの手法が最適かをいくつか検討した結果、View Transition API を採用することにしました。
実装を通して将来性を強く感じられたため、今回は「View Transition API」について紹介したいと思います。
※この記事は 2025年9月時点の情報をもとに執筆しています。ブラウザの対応状況などは今後変わる可能性があります。
01 View Transition API とは
View Transition API は、Web ページの遷移や要素の切り替えにアニメーションを挟める新しいブラウザ標準の API です。
基本的には CSS をベースにしているためシンプルに使えますが、JavaScript を組み合わせてより細かい制御を行うことができます。
特徴としては、
- ページ全体をクロスフェードさせるなどの基本アニメーションはすぐに利用可能
- 遷移前後で DOM 構造が異なっていてもアニメーションを適用できる
- @keyframes やアニメーションライブラリ(例：GSAP)と組み合わせて柔軟にカスタマイズ可能
- ブラウザ標準機能なので軽量
といった点があります。
従来、ページ遷移に自然なアニメーションを加えるには DOM 管理や複雑な実装が必要でしたが、SPA(Single-page application) だけでなく MPA(Multi-Page Application) にも対応し、標準 API として簡単に扱えるようになったのは大きな進歩と言えるでしょう。
現時点(2025年9月)では、Chrome や Safari では利用できますが、Firefox ではまだ対応していません。今後の実装状況に注目したいところです。
実際の動きについては、公式デモページ でも確認できます。
02 使い方
View Transition API を利用する方法は、大きく分けて 2 つあります。
CSS で有効化する方法
グローバルに読み込んでいる CSS に @view-transition を記述するだけで、サイト全体に適用されます。
/* global.css */
@view-transition {
navigation: auto;
}この場合、デフォルトの挙動はクロスフェード。特別な指定をしなくても、ページ遷移時に前後の画面がふわっと切り替わるアニメーションになります。
JavaScript でトリガーする方法
もうひとつは JavaScript でトリガーする方法です。
function handleClick(e) {
// 非対応ブラウザ用のフォールバック
if (!document.startViewTransition) {
return;
}
// View Transition のトリガー
document.startViewTransition();
}リンクやボタンのクリックイベントで document.startViewTransition() を呼び出すことで、同様にページ遷移にアニメーションを組み込むことができます。
ここからさらに、@keyframes を使ったり、GSAP などのアニメーションライブラリを組み合わせることで、どちらの方法でも独自の動きを加えることが可能です。
仕組みとしては、遷移前後で DOM のスナップショットを撮り、それらを切り替えることでアニメーションを実現しています。詳細は次に解説します。
03 内部の仕組み
document.startViewTransition() が呼ばれると、次のような流れで処理が行われます。
- 遷移前の DOM のスナップショットが撮られる
- 遷移後の DOM のスナップショットが、その前面に配置される
- デフォルトではクロスフェードで前後のスナップショットが入れ替わる
<html>
::view-transition
::view-transition-group(root)
::view-transition-image-pair(root)
::view-transition-old(root) // 遷移前のスナップショット
::view-transition-new(root) // 遷移後のページこのときブラウザは自動的に擬似要素を生成し、アニメーション対象を管理します。
たとえば ::view-transition-old は遷移前の状態、::view-transition-new は遷移後の状態を指し、これらを使ってスタイルを当てることでカスタマイズが可能になるのです。
つまり、開発者は DOM の複雑な状態管理を意識せず、スナップショットと擬似要素をベースに自然なアニメーションを適用できるようになっています。
個別要素のアニメーション
カスタマイズの例として、一覧ページのサムネイル画像と詳細ページの大きな画像を同じ要素としてつなぎ、自然な切り替えを実現する方法を紹介します。
HTML（一覧／詳細）
<!-- 一覧画面 -->
<div id="view-index">
<ul class="photo-list">
<li>
<div class="photo-link">
<img class="photo-thumb" src="images/photo_1.webp" width="640" height="360" alt="" />
</div>
</li>
</ul>
</div>
<!-- 詳細画面 -->
<div id="view-detail">
<div class="detail-layout">
<div>
<img class="photo-detail" src="images/photo_1.webp" width="640" height="360" alt="" />
</div>
</div>
</div>
CSS / SCSS
/* 一覧画面 */
.photo-thumb {
view-transition-name: photo;
}
/* 詳細画面 */
.photo-detail {
view-transition-name: photo;
}
上のコードのように同じ名前(ここでは photo)を指定すると、document.startViewTransition() の実行時にブラウザが遷移前後の要素を自動的にペアとして紐付け、共有要素トランジションとしてスムーズに接続します。
このとき、CSS で特別にscaleやtransformを指定していなくても、サムネイルから大きな画像への拡大が自動でなめらかに処理されるのも便利です。
04 スライドを実装してみた
今回 View Transition API を試した背景には、「Astro を触ってみたい」という動機もありました。
Astro は比較的新しいフレームワークで、サーバーファーストの設計や MPA でもモダンな開発体験を提供できる点が特徴です。公式に View Transition API をサポートしているため、組み合わせて試すのにちょうど良い環境でした。
Astro について詳しくは公式ドキュメントを参照してください。
この環境を利用して、実際にシンプルなスライドアプリを実装してみました。
グリッド状に並んだスライドから任意のものをクリックすると、そのスライドが拡大表示され、他のスライドは左側に縦一列で並ぶ仕組みです。
以下が実際のコードの一部です。
スライド一覧からクリックで拡大表示する仕組みは、クリックイベントから document.startViewTransition() を呼び出し、その中で DOM を更新すると遷移が始まります。
gridButton?.addEventListener("click", async () => {
if (!document.startViewTransition) return;
const transition = document.startViewTransition(() => {
// 遷移後の DOM 更新処理
});
});その上で、CSS 側では ::view-transition-group や ::view-transition-new / old を用いて、遷移前後の要素にアニメーションを指定します。
:root {
view-transition-name: root;
}
::view-transition-group(image) {
animation-duration: 0.8s;
animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
z-index: 10;
}
::view-transition-new(image),
::view-transition-old(image) {
width: 100%;
}スライドは番号と名前を持つオブジェクトの配列として管理しており、それだけで実装できたシンプルな構成です。
それでも View Transition API を利用することで、スムーズで直感的な切り替えを実現できました。
05 使ってみた感想
良かったところ
- 実装が簡単
- MPA でも SPA 的な遷移が可能
- フレームワークでのサポートが進みつつある
- Astro では正式に対応しており、React / Next.js でも実験的に利用可能
課題に感じたところ
view-transition-nameはユニークである必要がある- DOM ツリー内で重複するとトランジションが発火しなくなる
- ビューポート外の要素も対象になる
- 制御が必要な場合は Intersection Observer API を使い、画面内の要素にだけ動的に
view-transition-nameを付与するなどの工夫が必要
- 制御が必要な場合は Intersection Observer API を使い、画面内の要素にだけ動的に
- Firefox は未対応
- 非対応ブラウザでは通常の遷移になってしまうため、現時点では対応状況を考慮して利用しなければいけない
- 遷移先が重いと不自然に見える場合がある
- プリフェッチや Next.js の
Suspenseで改善可能
- プリフェッチや Next.js の
ちなみに、処理が重い場合、アニメーションが走った後にページが急に切り替わるように見えてしまうことがあります。
これを避けるには、事前にデータを取得しておく(プリフェッチ)ことでスムーズに見せることができるほか、Next.js では Suspense を使ってコンポーネントを非同期で読み込み、初回レンダリングに含めないようにすることが可能です。
06 まとめ
View Transition API を使うことで、従来は実装が複雑だったページ遷移時のアニメーションを、シンプルなコードで実現できることが分かりました。
特に DOM 構造が異なるページ間でもスムーズに動きをつなげられる点や、MPA にも対応できる点は大きな強みです。
実際に案件でも導入し、ユーザー体験を高める表現として利用できました。
一方で、view-transition-name の扱いには注意が必要だったり、Firefox が未対応であったりと、導入にあたって気をつける点もあります。
それでも、すでに Astro や Next.js などのフレームワークでサポートが進みつつあり、標準機能として採用が広がればさらに使いやすくなるでしょう。
今回の検証と実案件での経験を通じて、View Transition API は 今後のフロントエンド表現において実用性と将来性の両方を感じられる技術だと思いました。興味のある方はぜひ試してみてください。
S2ファクトリー株式会社
様々な分野のスペシャリストが集まり、Webサイトやスマートフォンアプリの企画・設計から制作、システム開発、インフラ構築・運用などの業務を行っているウェブ制作会社です。
実績
案件のご依頼、ご相談、その他ご質問はこちらからお問い合わせください。
