Newly available 条件付きOK。Chrome・Safari 18以降・Edgeで対応。Firefox は144から対応。

View Transitions API

view-transition-name は CSS のプロパティで、選択された要素が参加するビュー遷移のスナップショットを指定します。これにより、ビュー遷移中にデフォルトのクロスフェードアニメーションを使用することができるページの他の部分とは別に、それらの要素をアニメーションさせることができます。これにより、これらの要素に対して独自のアニメーションスタイルを定義することができます。

アニメーションページ遷移

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`view-transition-name`	111	111	144	18	111	18
DOM API
`startViewTransition` startViewTransition() は Document インターフェイスのメソッドで、新しいビュー遷移を始め、それを表す ViewTransition オブジェクトを返します。	111	111	144	18	111	18
`startViewTransition (options parameter)` options`パラメータ	125	125	147	18.2	125	18.2
`startViewTransition (options parameter types parameter)` `options.types` パラメータ	125	125	147	18.2	125	18.2
`startViewTransition (options parameter update parameter)` `options.update` パラメータ	125	125	147	18.2	125	18.2
`startViewTransition (updateCallback parameter)` `updateCallback` パラメータ	111	111	Preview	18	111	18
`PageRevealEvent` PageRevealEvent イベントオブジェクトは、Window.pagereveal_event イベントのハンドラー関数内で利用できます。	123	123		18.2	123	18.2
`PageRevealEvent` PageRevealEvent() コンストラクターは、新しい PageRevealEvent オブジェクトインスタンスを作成します。	128	128		18.2	128	18.2
`viewTransition` viewTransition は PageRevealEvent インターフェイスの読み取り専用プロパティで、文書間のナビゲーションでアクティブなビュー遷移を表す ViewTransition オブジェクトが含まれています。	126	126		18.2	126	18.2
`PageSwapEvent` PageSwapEvent イベントオブジェクトは、 Window.pageswap_event イベントのハンドラー関数内で利用できます。	124	124		18.2	124	18.2
`activation` activation は PageSwapEvent インターフェイスの読み取り専用プロパティで、これは、同一オリジン内の移動に関するナビゲーション種別と、移動元および移動先の文書履歴項目が含む NavigationActivation オブジェクトを保持しています。	124	124		18.2	124	18.2
`PageSwapEvent` PageSwapEvent() コンストラクターは、新しい PageSwapEvent オブジェクトのインスタンスを作成します。	128	128		18.2	128	18.2
`viewTransition` viewTransition は PageRevealEvent インターフェイスの読み取り専用プロパティで、文書間のナビゲーションにおけるアクティブなビュー遷移を表す ViewTransition オブジェクトを保持しています。	126	126		18.2	126	18.2
`ViewTransition` ViewTransition はView Transitions API のインターフェイスで、ビュー遷移を表し、トランジションが様々な状態（例えば、アニメーションを実行する準備ができている、またはアニメーションが終了した）に達したときに反応する機能、またはトランジションを完全にスキップする機能を提供します。	111	111	144	18	111	18
`finished` finished は ViewTransition インターフェイスの読み取り専用のプロパティで、ビュー遷移のアニメーションが完了し、新しいページビューがユーザーに表示され操作可能になると履行されるプロミス (Promise) です。	111	111	144	18	111	18
`ready` ready は ViewTransition インターフェイスの読み取り専用プロパティで、擬似要素ツリーが作成され、ビュー遷移のアニメーションが始まるときに履行される Promise です。	111	111	144	18	111	18
`skipTransition` skipTransition() は ViewTransition インターフェイスのメソッドで、ビュー遷移のアニメーション部分をスキップしますが、 DOM を更新する Document.startViewTransition() コールバックの実行はスキップしません。	111	111	144	18	111	18
`updateCallbackDone` updateCallbackDone は ViewTransition インターフェイスの読み取り専用のプロパティで、 Document.startViewTransition() のコールバックが返すプロミスが履行されると履行され、拒否されると拒否されるプロミス (Promise) です。	111	111	144	18	111	18
`pagereveal_event` pagereveal イベントは、ネットワークから新しい文書を読み込んだり、文書（バック/フォワードキャッシュ (bfcache) または事前レンダリング）をアクティブにしたりして、文書が最初にレンダリングされたときに発行されます。	123	123		18.2	123	18.2
`pageswap_event` pageswap イベントは、文書間の移動時、つまり前回表示していた文書がアンロードされようとする際に発行されます。	124	124		18.2	124	18.2
CSS プロパティ
`match-element`	137	137	144	18.4	137	18.4
`none`	111	111	144	18	111	18
その他
`css.selectors.view-transition` `::ビュー遷移`	109	109	144	18	109	18
`css.selectors.view-transition-group` `::view-transition-group()`	109	109	144	18	109	18
`css.selectors.view-transition-image-pair` `::ビュー遷移画像ペア()`	109	109	144	18	109	18
`css.selectors.view-transition-new` `::view-transition-new()`	109	109	144	18	109	18
`css.selectors.view-transition-old` `::view-transition-old()`	109	109	144	18	109	18

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS

document.startViewTransition(() => {
  updateDOMSomehow();
});

::view-transition-old(root) {
  animation: fade-out 0.3s ease;
}

::view-transition-new(root) {
  animation: fade-in 0.3s ease;
}

.hero-image {
  view-transition-name: hero;
}

ライブデモ

fu-dtransition

View Transitions API fu-dtransition demo.

プレビュー全画面表示

hi-ro-transition

View Transitions API hi-ro-transition demo.

プレビュー全画面表示

view-transition-name

View Transitions API View-transition-name demo.

プレビュー全画面表示

実務での使いどころ

ページ遷移アニメーション

MPAでもSPAでも、ページ間のシームレスなトランジションをCSSだけで定義できる。
画像の共有要素トランジション

一覧のサムネイルが詳細ページの大きな画像に滑らかに変形するHero Transition。

注意点

複雑な DOM 変更と組み合わせると予期しない挙動が起きることがある。
prefers-reduced-motion に対応し、アニメーションを無効化できるようにすること。

フォールバック戦略

CSS

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

対応ブラウザ

基本構文

ライブデモ

fu-dtransition

hi-ro-transition

view-transition-name

実務での使いどころ

ページ遷移アニメーション

画像の共有要素トランジション

注意点

フォールバック戦略

アクセシビリティ

参考リンク