View Transitions APIを使うと、MPAのWordPressサイトでもCSS数行だけでSPA風のシームレスなページ遷移アニメーションが実現できます。JSは不要、プログレッシブエンハンスメントなので非対応ブラウザにも影響なし。今日から使えます。
デモを見る
実際に動いているデモはこちらから確認できます。ページ間を移動すると、フェード・スライド・スケールなど8種類のアニメーションを右下のスイッチャーで切り替えられます。
※ Chrome 126以上推奨。SafariはSafari 18以上で動作します。
基本実装
/* ① 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; }
}コードのポイント
POINT
@view-transition { navigation: auto; } の1行が全ての起点
Chrome 126以上でMPAのページ遷移アニメーションを有効にするディレクティブ。非対応ブラウザは無視するのでプログレッシブエンハンスメントとして機能します。
POINT
view-transition-name は一意な値を
同一ページ内で同じ名前を複数の要素に付けるとエラーになります。ページ全体に使うなら
--body のようなカスタムプロパティ形式の名前が安全です。
ブラウザ対応状況
Can I Use：https://caniuse.com/view-transitions
追記：Speculation Rules と組み合わせるとさらに爆速になった
この記事を書いた後、Speculation Rules という API を組み合わせてみたところ、体感速度が別次元になりました。
Speculation Rules はユーザーがリンクをホバーしたタイミングで、次のページをバックグラウンドでプリレンダリングしておく仕組みです。
つまり：
・クリック前にページが完全に準備済み
・クリックした瞬間に View Transitions のアニメーションが走る
・読み込み待ちゼロ＋滑らかなアニメーション
という組み合わせになり、MPAでありながらネイティブアプリに近い体験が実現できます。
WordPressへの実装を試みたところ思わぬ落とし穴もあったので、そちらは別記事にまとめました。