別ページへ移動した瞬間、ページ全体がふっと切り替わる。普通の複数ページ構成のサイトでも、View Transitionsを使うと、その切り替えにアニメーションを付けられます。
最小構成ならJavaScriptは不要です。移動元と移動先の両方で、@view-transitionを有効にします。
@view-transition {
navigation: auto;
}これだけで、対応ブラウザでは既定のクロスフェードが使われます。ただし、2026年9月時点ではページ間のView TransitionsはまだBaselineではありません。使える条件とフォールバックを知ったうえで、見た目を一段追加する機能として扱います。
最小構成は両方のページに@view-transitionを書く
ページ間、つまりcross-documentのView Transitionでは、移動元と移動先の両方が参加する必要があります。先ほどの指定を共通CSSへ入れておけば、条件を満たすページ間で適用できます。
主な条件は次のとおりです。
- 移動元と移動先が同じオリジンである
- 両方のページが
navigation: autoでopt-inしている - クロスオリジンのリダイレクトを挟まない
- 対象になる種類のナビゲーションである
ここでつまずきやすいのがオリジンです。オリジンは、URLのスキーム・ホスト名・ポート番号の組み合わせなので、次の2つは同じオリジンです。
https://example.com/list/
https://example.com/detail/一方、片方がhttp、別のサブドメイン、異なるポート番号なら、同じオリジンにはなりません。ローカルで確認するときも、HTMLファイルを直接開くのではなく、同じ開発用サーバーから2ページを表示します。
アドレスバーへURLを直接入力した場合など、すべてのページ表示がアニメーション対象になるわけではありません。試すときは、まずページ内のリンクで往復します。
Chromeの実装では、ナビゲーションに4秒以上かかった場合は遷移アニメーションがスキップされます。ページ移動そのものを待たせてまで演出する仕組みではありません。
対応していないブラウザでは普通にページ移動する
View Transitionsは、プログレッシブエンハンスメントとして使いやすい機能です。@view-transitionを理解しないブラウザではアニメーションが付かず、通常どおりページが切り替わります。
2026年9月16日に公式情報で確認できた範囲は次のとおりです。
| ブラウザ | ページ間View Transitions |
|---|---|
| Chrome | 126以降 |
| Edge | 126以降 |
| Safari | 18.2以降 |
| Firefox | この記事では対応済みとしない |
Firefox 147のリリースノートには、追加されたView Transitionのtypes対応はSPAのみで、cross-documentは対象外と明記されています。MDNも@view-transitionをLimited availabilityとしています。その後の安定版で提供が完了したことを示す公式のリリースノートは確認できなかったため、この記事ではFirefoxを対応済みとしません。
ここで気をつけたいのは、ページ内のView Transitionsに対応していることと、別のHTMLへ移動するページ間の対応は別だという点です。view-transition-nameが認識されるかどうかだけでは、ページ間の対応を判定できません。
view-transition-nameで同じ要素をつなぐ
ページ全体のクロスフェードだけでなく、移動前後で同じ役割を持つ要素へview-transition-nameを付けると、その要素を別に扱えます。
たとえば、一覧ページのサイトロゴと詳細ページのサイトロゴへ同じ名前を付けます。
.site-logo {
view-transition-name: site-logo;
}移動元と移動先で同じ名前の要素が対応し、ブラウザが前後のスナップショットを使って遷移を作ります。
同じページ内に同じview-transition-nameを複数付けると遷移を開始できないため、名前は一意になるようにします。一覧に10枚のカードがあるからといって全部へ同じ名前を付けると、どれを対応させるのかが決まらず、遷移がスキップされる原因になります。複数のカードへ広げるときは、カードごとに別名を付ける、操作されたカードだけを対象にするなど、名前の管理が必要です。
まずはロゴや商品画像など、前後のページで対応関係がはっきりしている要素から、一覧側と詳細側を1つずつ対応させて試すと、名前の問題とレイアウトの問題を切り分けやすくなります。
動きを増やすならprefers-reduced-motionも一緒に考える
既定のクロスフェードだけでなく、横からスライドさせるような大きな動きを追加するなら、動きを減らす設定を使っている人への配慮も必要です。
たとえば、reduceが指定されているときは、View Transitionのアニメーションを止められます。
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
}
}View Transitionsは「ページ移動に必須の処理」ではなく、なくてもコンテンツへ到達できる演出として入れると扱いやすくなります。
共通CSSへ数行足すところから試せる
ページ間View Transitionsの面白いところは、複数ページ構成のサイトをSPAへ作り直さなくても試せることです。共通CSSに@view-transitionを入れ、必要なら特定の要素へview-transition-nameを付けます。対応していない環境では通常の移動へ戻ります。
ただし@view-transitionはまだBaselineではありません。案件で使うなら、対象ブラウザを決め、アニメーションがなくても操作や情報が欠けないことを先に確認しておいてください！
