::view-transition

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

::view-transition は CSS の擬似要素で、ビュー遷移のオーバーレイのルートを表します。これはすべてのビュー遷移を含み、他のすべてのページコンテンツの最上位の上に位置します。

ビュー遷移の間、 ::view-transition はビュー遷移のプロセスで説明されているように、関連する擬似要素ツリーに含まれます。これはこのツリーの最上位ノードであり、 1 つ以上の ::view-transition-group を子として持ちます。

::view-transition は UA スタイルシートでは以下の既定値が指定されています。

css
html::view-transition {
  position: fixed;
  inset: 0;
}

すべての ::view-transition-group 擬似要素は、ビュー遷移ルートに対して相対的に配置されます。

構文

css
::view-transition {
  /* ... */
}

例

css
::view-transition {
  background-color: rgba(0, 0, 0, 0.25);
}

仕様書

Specification
CSS View Transitions Module Level 1
# selectordef-view-transition

ブラウザーの互換性

BCD tables only load in the browser

関連情報