このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
overlay
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental:これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
overlay はCSS のプロパティで、最上位レイヤーに現れる要素（例えば、表示されたポップオーバーやモーダルダイアログ (<dialog>) 要素）が実際に最上位レイヤーにレンダリングされるかどうかを指定します。このプロパティはtransition-property 値のリストの中で、allow-discrete がtransition-behavior として設定されている場合にのみ意味を持ちます。
overlay はブラウザーによってのみ設定することができることに注意してください。作成者のスタイルは要素のoverlay 値を変更することはできません。しかし、要素に設定するトランジションする要素のリストにoverlay を追加することはできます。これにより、最上位レイヤーからの除去が延期され、すぐに消えずにアニメーションが発生するようになります。
メモ:オーバーレイoverlay のアニメーションをトランジションさせるには、transition-behavior: allow-discrete を設定する必要があります。overlay のアニメーションは通常の離散アニメーションと異なり、開始状態か終了状態かに関わらず、可視状態（つまりauto）がトランジションの再生時間全体にわたって常に表示されます。
構文
/* キーワード値 */overlay: auto;overlay: none;/* グローバル値 */display: inherit;display: initial;display: revert;display: revert-layer;display: unset;値
公式定義
| 初期値 | none |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | Discrete behavior except when animating to or fromnone is visible for the entire duration |
形式文法
overlay =
none|
auto
例
ポップオーバーのトランジション
この例では、ポップオーバーがトランジションで非表示から表示させたり戻したりするアニメーションをします。
HTML
HTML は、popover 属性を使用してポップオーバーとして宣言された<div> 要素と、popovertarget 属性を使用してポップオーバーの表示コントロールとして指定された<button> 要素を含んでいます。
<button popovertarget="mypopover">ポップオーバーを表示</button><div popover="auto">ポップオーバーです。アニメーションします。</div>CSS
overlay プロパティはトランジションするプロパティのリストにのみ存在しています。overlay はユーザーエージェントが制御するプロパティなので、トランジション前とトランジション後の状態では宣言されません。
html { font-family: Arial, Helvetica, sans-serif;}[popover]:popover-open { opacity: 1; transform: scaleX(1);}[popover] { font-size: 1.2rem; padding: 10px; /* 消滅アニメーションの最後の状態 */ opacity: 0; transform: scaleX(0); transition: opacity 0.7s, transform 0.7s, overlay 0.7s allow-discrete, display 0.7s allow-discrete; /* transition: all 0.7s allow-discrete; と等価 */}/* 有効にするためには、前の [popover]:popover-open ルールの 後に記述する必要があります。 */@starting-style { [popover]:popover-open { opacity: 0; transform: scaleX(0); }}/* ポップオーバーの背景のトランジション */[popover]::backdrop { background-color: rgb(0 0 0 / 0%); transition: display 0.7s allow-discrete, overlay 0.7s allow-discrete, background-color 0.7s; /* transition: all 0.7s allow-discrete; と等価 */}[popover]:popover-open::backdrop { background-color: rgb(0 0 0 / 25%);}/* 入れ子セレクター (&) は擬似要素を表すことができないので、この開始スタイルルールは入れ子にすることができません。 */@starting-style { [popover]:popover-open::backdrop { background-color: rgb(0 0 0 / 0%); }}アニメーションさせたい 2 つのプロパティはopacity とtransform です。これらのプロパティの開始状態にはポップオーバー要素の既定の非表示状態（[popover] で選択）を設定し、終了状態にはポップオーバーの開くための状態（:popover-open 擬似クラスで選択）を設定します。そして、transition プロパティを設定するには、この 2 つの間でアニメーションします。
アニメーションする要素は、表示されているときは最上位レイヤーに昇格し、非表示のときは最上位レイヤーから除去されるので、overlay がトランジションする要素のリストに追加されます。これにより、最上位レイヤーからの要素の除去はアニメーションが終わるまで確実に延期されます。このような単純なアニメーションでは大きな違いはありませんが、より複雑なケースではこれを行わないと、要素がオーバーレイからすばやく除去されてしまい、アニメーションがスムーズでなくなったり、効果的でなくなったりすることがあります。また、transition-behavior: allow-discrete の一括指定には、離散的なトランジションを有効にする値も設定されていることに注意してください。
アニメーションが双方向で動作するようにするには、以下のような手順も必要になります。
- アニメーションの開始状態を
@starting-styleアットルール内に設定します。これは予期しない動作を避けるために必要です。既定では、要素の最初のスタイルが更新されたときや、display型がnoneから別の型に変更されたときには、トランジションは発生しません。@starting-styleでは、既定で設定されていることを特定の制御された方法で上書きすることができます。これがなければ、出現アニメーションは発生せず、ポップオーバーはただ現れるだけです。 displayもトランジションする要素のリストに追加されているので、アニメーションする要素は出現アニメーションと消滅アニメーションの両方を通して表示されます（display: blockに設定します）。これがなければ、消滅アニメーションでは表示されません。結果的に、ポップオーバーはただ消えてしまいます。この場合も、アニメーションが発生するためにはtransition-behavior: allow-discreteが必要です。
また、開いた時にポップオーバーの背後に現れる::backdrop にトランジションを記載して、暗くなるアニメーションを提供していることに注意してください。ポップオーバーを開くための背景を選択するには[popover]:popover-open::backdrop が必要です。
結果
このコードは次のように表示されます。
メモ:ポップオーバーは表示されるたびにdisplay: none からdisplay: block に変化するので、出現トランジションのたびに@starting-style スタイルから[popover]:popover-open スタイルに遷移します。ポップオーバーが閉じられたとき、その[popover]:popover-open 状態から既定の[popover] 状態に遷移します。
このような場合、出現時と消滅時のスタイル設定を異なるものにすることが可能です。この証明はスタイル設定を使用する場合のデモンストレーションの例を参照してください。
仕様書
| Specification |
|---|
| CSS Positioned Layout Module Level 4 # overlay |
ブラウザーの互換性
関連情報
- CSS トランジションモジュール
@starting-styletransition-behavior- Four new CSS features for smooth entry and exit animations (developer.chrome.com, 2023)