View Transitions APIでSPA風ページ遷移を実装する

View Transitions APIを使うと、MPAのWordPressサイトでもCSS数行だけでSPA風のシームレスなページ遷移アニメーションが実現できます。JSは不要、プログレッシブエンハンスメントなので非対応ブラウザにも影響なし。今日から使えます。

 デモを見る

 基本実装

/* ① MPAのページ遷移を有効化 */
@view-transition {
  navigation: auto;
}

/* ② body全体をトランジション対象に */
body {
  view-transition-name: --body;
}

/* ③ 退場アニメーション（現在のページ） */
::view-transition-old(--body) {
  animation: fade-out 350ms ease both;
}

/* ④ 入場アニメーション（次のページ） */
::view-transition-new(--body) {
  animation: fade-in 450ms ease 100ms both;
}

@keyframes fade-out {
  to   { opacity: 0; translate: 0 -8px; }
}
@keyframes fade-in {
  from { opacity: 0; translate: 0 8px; }
}

/* ① MPAのページ遷移を有効化 */
@view-transition {
  navigation: auto;
}

/* ② body全体をトランジション対象に */
body {
  view-transition-name: --body;
}

/* ③ 退場アニメーション（現在のページ） */
::view-transition-old(--body) {
  animation: fade-out 350ms ease both;
}

/* ④ 入場アニメーション（次のページ） */
::view-transition-new(--body) {
  animation: fade-in 450ms ease 100ms both;
}

@keyframes fade-out {
  to   { opacity: 0; translate: 0 -8px; }
}
@keyframes fade-in {
  from { opacity: 0; translate: 0 8px; }
}

 コードのポイント

@view-transition { navigation: auto; } の1行が全ての起点

Chrome 126以上でMPAのページ遷移アニメーションを有効にするディレクティブ。非対応ブラウザは無視するのでプログレッシブエンハンスメントとして機能します。

view-transition-name は一意な値を

同一ページ内で同じ名前を複数の要素に付けるとエラーになります。ページ全体に使うなら --body のようなカスタムプロパティ形式の名前が安全です。

 ブラウザ対応状況

Can I Use：https://caniuse.com/view-transitions

追記：Speculation Rules と組み合わせるとさらに爆速になった

この記事を書いた後、Speculation Rules という API を組み合わせてみたところ、体感速度が別次元になりました。

Speculation Rules はユーザーがリンクをホバーしたタイミングで、次のページをバックグラウンドでプリレンダリングしておく仕組みです。

つまり：

• クリック前にページが完全に準備済み
• クリックした瞬間に View Transitions のアニメーションが走る
• 読み込み待ちゼロ＋滑らかなアニメーション

という組み合わせになり、MPAでありながらネイティブアプリに近い体験が実現できます。

WordPressへの実装を試みたところ思わぬ落とし穴もあったので、そちらは別記事にまとめました。

あわせて読みたい

【WordPress】Speculation RulesをWordPressに実装したらすでに入ってた話 Speculation Rules とは Speculation Rules とは、ユーザーがリンクをクリックする前に、次のページをバックグラウンドで先読み（プリレンダリング）しておくブラウザの...