View Transition Builderとは
View Transitions APIは、ページ間の移動やページコンテンツの更新時にスムーズなアニメーション遷移を作成します。ブラウザが古い状態と新しい状態のスクリーンショットをキャプチャし、それらの間をクロスフェードします。特定の要素にview-transition-nameを割り当てて、遷移中に独立してアニメーションさせることができます。同一ドキュメント遷移（SPA）の場合はdocument.startViewTransition()を使用します。クロスドキュメント遷移（MPA）の場合はmetaタグを追加します。
クイックアンサー
View Transitions APIを使用してスムーズなページおよび要素アニメーションを実現します。SPAの場合はdocument.startViewTransition(() => updateDOM())、MPAの場合は<meta name="view-transition" content="same-origin">をheadに追加します。独立したアニメーションのために要素にview-transition-nameを割り当てます。必ずprefers-reduced-motionを尊重してください。
Last updated: 2026-05-28
制限事項
- クロスドキュメント（MPA）遷移は同一オリジンのページ間でのみ機能します。クロスオリジンナビゲーションはmetaタグがあってもビュー遷移をトリガーしません。
- ブラウザは古い状態と新しい状態の静的スクリーンショットをキャプチャします。動画、アニメーション、継続的に更新される要素などのライブコンテンツは、遷移中にフリーズして見える場合があります。
- View TransitionsはBaseline 2025です：Chrome 111+、Edge 111+、Safari 18.2+。Firefoxのサポートは開発中です。非対応ブラウザではアニメーションなしでナビゲーションします。機能はグレースフルにデグレードします。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- 遷移タイプを選択します。同一ドキュメント（SPAコンテンツ更新用）またはクロスドキュメント（MPAページナビゲーション用）です。
- アニメーションのduration、easing、および独立してアニメーションさせる要素のview-transition-nameを設定します。
- オプションで::view-transition-newおよび::view-transition-old擬似要素をカスタマイズします。
- CSSとJavaScript/metaタグをコピーします。アクセシビリティのためにprefers-reduced-motionフォールバックを有効にします。
主な用途
- 両方のページで同じview-transition-nameを使用して、リストページと詳細ページ間でヒーロー画像をアニメーションさせます。
- view-transition metaタグを追加して、静的サイトのページ移動時にスムーズなクロスフェードを追加します。
- ギャラリーフィルターをアニメーションさせます。画像グリッドを更新する前にstartViewTransition()を呼び出して、スムーズなレイアウト変更を実現します。