ネイティブアプリでは当たり前の「滑らかなページ遷移」。これまでWebでは、SPAフレームワークや複雑なJavaScriptが必要でした。
しかし View Transitions API の登場により、CSSベースのエレガントなページ遷移がネイティブでサポートされるようになりました。
View Transitions APIとは
ページ間（または同一ページ内のDOM変更時）に、ブラウザが自動的に「古い状態」と「新しい状態」のスナップショットを撮り、その間をアニメーションで補間する仕組みです。
基本：同一ページ内の遷移
まずは同一ページ内でのDOM変更にフェードイン/フェードアウトを適用する基本パターン。下のデモでリスト項目をクリックすると、詳細ページにフェード遷移します。
Demo App
🎨 デザイン制作
💻 Web開発
📊 運用・改善
JavaScript
// View Transitions APIを使ったDOM切り替え
function navigate(newContent) {
if (!document.startViewTransition) {
// 非対応ブラウザ：即座に切り替え
updateDOM(newContent);
return;
}
// 対応ブラウザ：フェード遷移付きで切り替え
document.startViewTransition(() => {
updateDOM(newContent);
});
}
CSSでアニメーションをカスタマイズ
デフォルトのフェードでは物足りない場合、CSSで遷移アニメーションを自由にカスタマイズできます。
CSS
/* デフォルトのフェード遷移をカスタマイズ */
::view-transition-old(root) {
animation: fade-out 0.3s ease;
}
::view-transition-new(root) {
animation: fade-in 0.3s ease;
}
@keyframes fade-out {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(0.95); }
}
@keyframes fade-in {
from { opacity: 0; transform: scale(1.05); }
to { opacity: 1; transform: scale(1); }
}
MPA（マルチページアプリ）での使い方
Chrome 126+では、通常のページ遷移（リンククリック）にもView Transitionsを適用できます。CSSとmeta要素を追加するだけです。
HTML
<!-- head内に追加するだけ --> <meta name="view-transition" content="same-origin">
CSS
/* スライド遷移 */
@view-transition {
navigation: auto;
}
::view-transition-old(root) {
animation: slide-out 0.3s ease;
}
::view-transition-new(root) {
animation: slide-in 0.3s ease;
}
@keyframes slide-out {
to { transform: translateX(-100%); opacity: 0; }
}
@keyframes slide-in {
from { transform: translateX(100%); opacity: 0; }
}
💡 ポイント：特定の要素だけをアニメーションさせたい場合は、その要素に
view-transition-name をつけます。例えば、ヘッダーは固定のまま、コンテンツ部分だけスライドさせることができます。
まとめ
- document.startViewTransition() → SPA内のDOM変更にフェード遷移
- ::view-transition-old / new → CSSでアニメーションをカスタマイズ
- meta要素 → MPAでもページ遷移アニメーション
- view-transition-name → 要素ごとの個別アニメーション
💡 ツタワルの制作では：View Transitions APIなどの最新Web標準を積極的に活用し、ネイティブアプリに匹敵するユーザー体験をWebで実現しています。