Top layer animations

[legendofmi]

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

Specification

https://drafts.csswg.org/css-position-4/#overlay
https://drafts.csswg.org/css-transitions-2/#defining-before-change-style
https://drafts.csswg.org/css-display-4/#display-animation

Standards Positions

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

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/

Tests

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

[dandclark]

Since @starting-style and transition-behavior were already included in an Interop2024 focus area (link) they are also tracked here as a carryover focus area that would pull them forward into Interop2025 if accepted.

overlay hasn't been accepted as a focus area yet though (it was proposed but not accepted in #581).

[wpt-interop]

Thank you for proposing Top layer animations for inclusion in Interop 2025.

We wanted to let you know that this proposal was not selected to be part of Interop this year.

On behalf of the entire Interop team, thank you for submitting this proposal for consideration. We got many more proposals than we could include in this year's project, necessitating some difficult choices. Please note this should not be taken as a comment on the technology as a whole, or our willingness to consider it for Interop in the future. We appreciate the work you put into your proposal, and would welcome your participation in future rounds of Interop.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2025.

Posted on behalf of the Interop team.