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: https://github.com/mozilla/standards-positions/issues/777 Webkit: https://github.com/WebKit/standards-positions/issues/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 https://github.com/web-platform-tests/interop/issues/581).