view-transition-name
Baseline
2025
Newly available
Since October 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
view-transition-name は CSS のプロパティで、選択された要素に識別名 (<custom-ident>) を与え、ルートビュー遷移とは別のビュー遷移に参加させます。 none の値が指定された場合はビュー遷移を行いません。
構文
css
/* <custom-ident> 値の例 */
view-transition-name: header;
view-transition-name: figure-caption;
/* キーワード値 */
view-transition-name: none;
値
<custom-ident>-
選択した要素を、ルートビュー遷移とは別のビュー遷移に参加させるための識別名です。識別子は一意でなければなりません。 2 つのレンダリング要素が同時に同じ
view-transition-nameを持つ場合、ViewTransition.readyは拒否され、トランジションはスキップされます。 none-
選択された要素はビュー遷移に参加しません。
公式定義
| 初期値 | none |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
view-transition-name =
none |
<custom-ident>
例
css
figcaption {
view-transition-name: figure-caption;
}
仕様書
| Specification |
|---|
| CSS View Transitions Module Level 1 # view-transition-name-prop |
ブラウザーの互換性
Loading…