Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The overlay
<dialog>
element) is actually rendered in the top layer. This property is only relevant within a list of transition-behavior
.
It is important to note that overlay
can only be set by the browser — author styles cannot change the overlay
value of any element. You can, however, add overlay
to the list of transition properties set on an element. This causes its removal from the top layer to be deferred so it can be animated instead of disappearing immediately.
Note:
When transitioning overlay
, you need to set discrete animations in that the visible (i.e. auto
) state will always be shown for the full duration of the transition, regardless of whether it is the start or end state.