Repository navigation
Top layer animations #789
Description
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/
Activity
[-]Entry or exit animations from the top layer.[/-][+]Entry or exit animations from the top layer[/+][-]Entry or exit animations from the top layer[/-][+]Top layer animations[/+]dandclark commentedon Oct 8, 2024
Since
@starting-styleandtransition-behaviorwere 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.overlayhasn't been accepted as a focus area yet though (it was proposed but not accepted in #581).wpt-interop commentedon Feb 13, 2025
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.