view-transition-name

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used 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

ブラウザーの互換性

BCD tables only load in the browser

関連情報