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

view-transition-class

view-transition-class は CSS のプロパティで、選択された要素に識別用のクラス（<custom-ident>）をつけて、それらの要素のビュー遷移のスタイル設定のための追加の方法を提供します。

ビュー遷移クラス分類

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
view-transition-class
125
125
144
18.2
125
18.2
none
125
125
144
18.2
125
18.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.card {
  view-transition-class: card-transition;
}
::view-transition-group(*.card-transition) {
  animation-duration: 0.3s;
}

ライブデモ

cardtransitionclass

CSS cardtransitionclass demo.

プレビュー全画面表示

sameclass. by card

CSS sameclass. by card demo.

プレビュー全画面表示

grouptransition

CSS grouptransition demo.

プレビュー全画面表示

実務での使いどころ

  • 統一されたカード遷移

    一覧ページの複数のカード要素に同じ遷移アニメーションを効率的に適用します。

注意点

  • view-transition-name は一意である必要がありますが、view-transition-class は複数の要素で共有できます。両者の違いを理解して使用してください。

アクセシビリティ

  • prefers-reduced-motion メディアクエリを使用して、動きを減らしたい設定のユーザーにはビュー遷移を抑制してください。

参考リンク