::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 |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
::view-transition |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.