overlay
overlayは、popoverや<dialog>などのトップレイヤー要素のトランジションをスムーズに行うためのCSSプロパティです。allow-discreteトランジションとして使用し、要素が閉じるアニメーション中にトップレイヤーから即座に除去されることを防ぎます。直接値を設定するのではなく、transitionプロパティの対象として指定する点が特徴です。
概要
overlayは、popoverや<dialog>などのトップレイヤー要素のトランジションをスムーズに行うためのCSSプロパティです。allow-discreteトランジションとして使用し、要素が閉じるアニメーション中にトップレイヤーから即座に除去されることを防ぎます。直接値を設定するのではなく、transitionプロパティの対象として指定する点が特徴です。
対応ブラウザ
デスクトップ
Chrome 117+
Edge 117+
Safari 未対応
Firefox 未対応
モバイル
Chrome Android 117+
Safari iOS 未対応
Firefox Android 未対応
基本構文
CSS
dialog {
transition: opacity 0.3s, overlay 0.3s allow-discrete;
}
dialog:not([open]) {
opacity: 0;
}実務での使いどころ
-
ダイアログの滑らかな閉じアニメーション
ダイアログやポップオーバーが閉じる際にフェードアウトなどのアニメーションを完了させてからトップレイヤーを解除できます。
注意点
- overlayプロパティは直接設定するものではなく、transitionプロパティでallow-discreteと共に指定する必要があります。
アクセシビリティ
- ダイアログの閉じアニメーションが長すぎると、支援技術との状態の不整合が生じる可能性があるため、適度な長さに設定してください。