Newly available 条件付きOK。主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。フォールバックを検討。

Active view transition

:active-view-transition は CSS の擬似クラスで、ビュー遷移が進行中（アクティブ）であるときに文書のルート要素に一致し、遷移が完了すると一致しなくなります。

ビュー遷移擬似クラス

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:active-view-transition
125
125
144
18
125
18
DOM API
types

ViewTransition インターフェイスの type 読み取り専用プロパティは、ビュー トランジションで設定されたタイプにアクセスして変更できるようにする ViewTransitionTypeSet です。
125
125
147
18.2
125
18.2
ViewTransitionTypeSet

ビュー遷移 API の ViewTransitionTypeSet インターフェイスは、アクティブなビュー遷移のタイプを表すセットのようなオブジェクトです。 これにより、移行中に型をオンザフライでクエリまたは変更できるようになります。
125
125
147
18.2
125
18.2
@@iterator

[シンボル.イテレータ］
125
125
147
18.2
125
18.2
add
125
125
147
18.2
125
18.2
clear
125
125
147
18.2
125
18.2
delete
125
125
147
18.2
125
18.2
entries
125
125
147
18.2
125
18.2
forEach
125
125
147
18.2
125
18.2
has
125
125
147
18.2
125
18.2
keys
125
125
147
18.2
125
18.2
size
125
125
147
18.2
125
18.2
values
125
125
147
18.2
125
18.2
その他
css.selectors.active-view-transition-type

`:アクティブビュートランジションタイプ()`
125
125
147
18.2
125
18.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
:root:active-view-transition {
  background: #f0f0f0;
}
:root:active-view-transition-type(slide) {
  --transition-duration: 300ms;
}

ライブデモ

transitionmiddle. backgroundchange

CSS transitionmiddle. backgroundchange demo.

プレビュー全画面表示

slide typetransition

CSS slide typetransition demo.

プレビュー全画面表示

cross fade type

CSS cross fade type demo.

プレビュー全画面表示

実務での使いどころ

  • ページ遷移中のUI調整

    ビュー遷移中にナビゲーションバーの表示を変更したり、背景色を調整するなど、遷移中限定のスタイルを適用できます。

注意点

  • View Transitions APIに依存する機能であり、すべてのブラウザで利用可能ではありません。プログレッシブエンハンスメントとして実装してください。

アクセシビリティ

  • prefers-reduced-motion メディアクエリと組み合わせて、アニメーションを制限する設定のユーザーにはビュー遷移を無効化または簡略化してください。

参考リンク