overlay
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
overlay は CSS のプロパティで、最上位レイヤーに現れる要素（例えば、表示されたポップオーバーやモーダルダイアログ (<dialog>) 要素）が実際に最上位レイヤーにレンダリングされるかどうかを指定します。このプロパティは transition-property 値のリストの中で、 allow-discrete が transition-behavior として設定されている場合にのみ意味を持ちます。
overlay はブラウザーによってのみ設定することができることに注意してください。作成者のスタイルは要素の overlay 値を変更することはできません。しかし、overlay を要素に設定するトランジションする要素のリストに追加することはできます。これにより、最上位レイヤーからの除去が延期され、すぐに消えずにアニメーションが発生するようになります。
メモ: オーバーレイ overlay のアニメーションをトランジションさせるには、 transition-behavior: allow-discrete を設定する必要があります。 overlay のアニメーションは通常の離散アニメーションと異なり、開始状態か終了状態かに関わらず、可視状態（つまり auto）がトランジションの再生時間全体にわたって常に表示されます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
overlay 実験的 | 117 | 117 | | | 117 | |
auto 実験的 | 117 | 117 | | | 117 | |
none 実験的 | 117 | 117 | | | 117 | |
基本構文
CSS
dialog {
transition: opacity 0.3s, overlay 0.3s allow-discrete;
}
dialog:not([open]) {
opacity: 0;
}ライブデモ
実務での使いどころ
-
ダイアログの滑らかな閉じアニメーション
ダイアログやポップオーバーが閉じる際にフェードアウトなどのアニメーションを完了させてからトップレイヤーを解除できます。
注意点
- overlayプロパティは直接設定するものではなく、transitionプロパティでallow-discreteと共に指定する必要があります。
アクセシビリティ
- ダイアログの閉じアニメーションが長すぎると、支援技術との状態の不整合が生じる可能性があるため、適度な長さに設定してください。