CSSだけでページ遷移にアニメーションを付ける（MPAのView Transition）

複数ページのサイトでも、CSSの数行でページ切り替えにアニメーションを付けられる。

どんな問題を解決するか / いつ使うか

静的サイトやWordPressなど、SPAではないサイトでページ遷移を滑らかにしたいとき。

やり方

共通CSSでMPAのView Transitionを有効化する：

css

@view-transition { navigation: auto; }

body に名前を付ける：

css

body { view-transition-name: page; }

遷移の直前・直後のスナップショットが擬似要素として表示されるので、それをアニメーションさせる：

css

::view-transition-old(page) { animation: fade-out .3s ease both; }
::view-transition-new(page) { animation: fade-in .3s ease both; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

Reactなら、Next.js が公開している react-view-transitions スキルを使ってエージェントに組み込ませることもできる。

注意点・対応状況

対応していないブラウザでは普通に遷移するだけ（段階的に強化する考え方）。
prefers-reduced-motion を考慮する。
CSSの例は投稿の手順を元に補ったもの。

出典

投稿者: @tak_dcxi (TAK) ／関連：@nextjs
投稿: @tak_dcxi · 2026-03-18 / @nextjs · 2026-04-03
投稿日: 2026-03-18 / 2026-04-03（JST）
収集日: 2026-10-09（JST）