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

Active view transition

ビュー遷移APIと連携し、ページ遷移アニメーション中にのみ特定のスタイルを適用できます。:active-view-transition-type() を使えば、遷移の種類に応じてスタイルを切り替えることも可能です。SPAやMPAのページ遷移をよりリッチに演出するための重要な擬似クラスです。

ビュー遷移擬似クラス

概要

ビュー遷移APIと連携し、ページ遷移アニメーション中にのみ特定のスタイルを適用できます。:active-view-transition-type() を使えば、遷移の種類に応じてスタイルを切り替えることも可能です。SPAやMPAのページ遷移をよりリッチに演出するための重要な擬似クラスです。

対応ブラウザ

デスクトップ

Chrome 125+
Edge 125+
Safari 18.2+
Firefox 147+

モバイル

Chrome Android 125+
Safari iOS 18.2+
Firefox Android 147+

基本構文

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

実務での使いどころ

  • ページ遷移中のUI調整

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

注意点

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

アクセシビリティ

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

参考リンク