view-transition-class
view-transition-class は複数のビュー遷移要素に共通のアニメーションスタイルを一括で適用するためのグループ化メカニズムです。個別の view-transition-name ごとにスタイルを定義する代わりに、クラスベースで効率的にスタイリングできます。大規模なビュー遷移を持つアプリケーションでのコード管理を簡素化します。
概要
view-transition-class は複数のビュー遷移要素に共通のアニメーションスタイルを一括で適用するためのグループ化メカニズムです。個別の view-transition-name ごとにスタイルを定義する代わりに、クラスベースで効率的にスタイリングできます。大規模なビュー遷移を持つアプリケーションでのコード管理を簡素化します。
対応ブラウザ
デスクトップ
Chrome 125+
Edge 125+
Safari 18.2+
Firefox 144+
モバイル
Chrome Android 125+
Safari iOS 18.2+
Firefox Android 144+
基本構文
CSS
.card {
view-transition-class: card-transition;
}
::view-transition-group(*.card-transition) {
animation-duration: 0.3s;
}実務での使いどころ
-
統一されたカード遷移
一覧ページの複数のカード要素に同じ遷移アニメーションを効率的に適用します。
注意点
- view-transition-name は一意である必要がありますが、view-transition-class は複数の要素で共有できます。両者の違いを理解して使用してください。
アクセシビリティ
- prefers-reduced-motion メディアクエリを使用して、動きを減らしたい設定のユーザーにはビュー遷移を抑制してください。