Cross-document view transitions | Frontend Practical Guide

Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`@view-transition`	126	126		18.2	126	18.2
DOM API
`CSSViewTransitionRule` CSSViewTransitionRule インターフェイスは、CSS @view-transition at-rule を表します。	126	126		18.2	126	18.2
`navigation` CSSViewTransitionRule インターフェイスのナビゲーション読み取り専用プロパティは、関連付けられた @view-transition at-rule のナビゲーション記述子の値を返します。	126	126		18.2	126	18.2
`types` CSSViewTransitionRule インターフェースの type 読み取り専用プロパティは、関連付けられた @view-transition at-rule の type 記述子の値を含む配列を返します。	126	126		18.2	126	18.2

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

CSS

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

CSS oldpe-j -> fade out demo.

CSS transitionmiddle demo.

CSS newpe-j <- fade in demo.