CSSだけでページ遷移アニメーション（MPA の View Transitions）

@view-transition { navigation: auto; } を共通CSSに書くだけで、普通のリンク遷移（MPA）にアニメーションを付けられる。

どんな時に使う？

SPA ではない通常のサイト（WordPress・静的サイトなど）で、ページ遷移にフェードやスライドを付けたいとき。
JS のルーターやライブラリを入れたくないとき。

手順とコード

遷移元・遷移先の両方で読み込む共通CSSに @view-transition を書き、クロスドキュメント遷移を有効化する。
body に view-transition-name を付ける。
遷移直前・直後のスナップショットが ::view-transition-old() / ::view-transition-new() 擬似要素として表示されるので、それをアニメーションさせる。

css

@view-transition {
  navigation: auto;
}

body {
  view-transition-name: page;
}

::view-transition-old(page) {
  animation: page-out 0.3s ease both;
}
::view-transition-new(page) {
  animation: page-in 0.4s ease both;
}

@keyframes page-out { to   { opacity: 0; translate: 0 -12px; } }
@keyframes page-in  { from { opacity: 0; translate: 0 12px; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(page),
  ::view-transition-new(page) { animation: none; }
}

注意点・対応状況

同一オリジン間の遷移のみ対象。
Chrome / Edge 126+、Safari 18.2+ で対応。Firefox のクロスドキュメント遷移対応は Can I use で要確認（未対応環境では普通に遷移するだけ）。
遷移先の読み込みが遅いとアニメーションの開始も遅れる。重いページでは控えめな演出に。

出典

@tak_dcxi · 2026-03-18