View Transitions API

View Transitions API（Chrome 111 以降）を使うと、ページの異なる状態間やページ遷移の間を、滑らかにアニメーションさせられます。変更前と変更後のスクリーンショットを取得し、CSS アニメーションを使ってその間をモーフィングすることで、ウェブ上でアプリのようなトランジションを実現します。

DOM の更新を document.startViewTransition(() => updateDom()) で囲むと、同じページ内のトランジションを開始できます。ブラウザーが以前の状態を取得し、更新を実行してから新しい状態を取得し、その間を自動的にクロスフェードします。

CSS を何も指定しなくても、View Transitions はページの以前の状態と新しい状態の間でシンプルなクロスフェードを実行します。この JavaScript の 1 行だけで、以前なら複雑な CSS アニメーションの制御や専用のアニメーションライブラリが必要だった、洗練されたトランジションを追加できます。

この API は 4 つの疑似要素を公開します。::view-transition（ルートのオーバーレイ）、::view-transition-old(root)（以前のページのスクリーンショット）、::view-transition-new(root)（新しいページのスクリーンショット）、::view-transition-image-pair(root) です。CSS アニメーションでこれらをカスタマイズできます。

トランジションの前後で存在し続ける要素に view-transition-name: hero-image を指定します。API がその要素を以前の位置とサイズから新しい位置とサイズへモーフィングするため、要素単位の滑らかなアニメーションを自動的に作成できます。

疑似要素にカスタムキーフレームを指定すると、デフォルトのクロスフェードを上書きできます。前方へのナビゲーションでは右からスライドインし、戻る操作では左からスライドインさせます。::view-transition-new(root) と ::view-transition-old(root) を @keyframes の対象にしてください。

ドキュメントをまたぐ View Transitions（Chrome 126 以降）を使うと、マルチページアプリでページ全体のナビゲーション間をアニメーションさせられます。CSS に @view-transition { navigation: auto; } を追加するだけで、ブラウザーが HTML ページ間のトランジションを自動的に処理します。JavaScript は必要ありません。

前庭障害のあるユーザーに、動きの激しいトランジションを体験させてはいけません。トランジションのアニメーションを @media (prefers-reduced-motion: no-preference) で囲むと、動きを減らしたいユーザーにはカスタムアニメーションを無効にしつつ、DOM の機能的な更新は維持できます。

React Router v6.4 以降、Vue Router、Astro は View Transitions をサポートしています。これらのフレームワークは、ルート変更を自動的に startViewTransition で囲みます。ナビゲーションやレイアウトの外枠など、トランジション中も残る要素に view-transition-name を指定して、ルートごとのトランジションスタイルを設定できます。

View Transitions はページのスクリーンショットを取得するため、複雑なレイアウトでは負荷が高くなることがあります。合成レイヤーが多い大規模なページでは、取得中に動きが引っかかる場合があります。トランジションの時間は 300ms 未満にし、非常に複雑なサブツリーのトランジションは避けてください。

使用する前に API の利用可能性を確認してください。if (!document.startViewTransition) { updateDom(); return; } フォールバックでは、アニメーションなしで通常どおり DOM を更新します。View Transitions は段階的な機能強化です。対応していない環境でもアプリは動作し、対応している環境では体験が向上します。

View Transition 中に、要素へ view-transition-name を指定すると何が可能になりますか？

View Transitions API を使うと、最小限のコードで DOM の状態間やページ遷移間のクロスフェードとモーフィングのアニメーションを実現できます。名前付きのトランジション要素は自動的にモーフィングされ、疑似要素にカスタムアニメーションを指定するとデフォルトのクロスフェードを置き換えられます。prefers-reduced-motion に配慮し、対応していないブラウザーには段階的な機能強化を使用してください。