Description

Support for the CSS features which make top layer elements, like <dialog> elements, or elements with the popover attribute, animatable as they enter and exit the top layer.

The features include the overlay CSS property, the @starting-style at-rule, the transition-behavior CSS property, and support for animating the display and content-visibility CSS properties.

Current status:

• overlay CSS property - Only supported by Blink (https://caniuse.com/mdn-css_properties_overlay)
• @starting-style and allow-discrete for display property - Already supported by Blink and Webkit (https://caniuse.com/mdn-css_properties_display_is_transitionable)

More details on the current status here:
https://microsoftedge.github.io/TopDeveloperNeeds/#top-layer-animations

Demo from Chrome's blog:
https://developer.chrome.com/blog/entry-exit-animations#overlay_property

Standards Positions

Blink: Already supported
Gecko: mozilla/standards-positions#777
Webkit: WebKit/standards-positions#169

Specification

https://drafts.csswg.org/css-position-4/#overlay

web-feature

https://web-platform-dx.github.io/web-features-explorer/features/overlay/

Test Links

https://wpt.fyi/results/?q=path%3A%2Fcss%2Fcss-position%2Foverlay%2F+or+path%3A%2Fcss%2Fcss-contain%2Fcontent-visibility%2Fcontent-visibility-interpolation.html+or+path%3A%2Fcss%2Fcss-display%2Fanimations%2Fdisplay-interpolation.html+or+%28path%3A%2Fcss%2Fcss-transitions%2Fparsing%2F+and+transition-behavior%29+or+%28path%3A%2Fcss%2F+and+starting-style%29+%21is%3Atentative&label=experimental&label=master

Additional Signals

https://frontendmasters.com/blog/animating-dialog/
https://nerdy.dev/using-starting-style-and-transition-behavior-for-enter-and-exit-stage-effects
https://blog.logrocket.com/animating-dialog-popover-elements-css-starting-style/
https://www.oidaisdes.org/native-dialog-and-popover.en/