Top layer animations (animatable display and content-visibility) #1456

Description

There's a set of CSS features which, when used together, make top layer elements, like <dialog> elements, or elements with the popover attribute, animatable as they enter and exit the top layer.

These features are:

• The overlay CSS property
• The @starting-style at-rule
• The transition-behavior CSS property
• The ability to animate the display and content-visibility CSS properties

Out of those, the following only are not yet widely available:

• The overlay CSS property
  • Not supported in Firefox, see https://bugzilla.mozilla.org/show_bug.cgi?id=1841456
  • Not supported in Safari, see https://bugs.webkit.org/show_bug.cgi?id=276727
• The ability to animate the display and content-visibility CSS properties
  • Not supported in Firefox, see https://bugzilla.mozilla.org/show_bug.cgi?id=1882408 and https://bugzilla.mozilla.org/show_bug.cgi?id=1834877

However, according to the Deprecate and remove: CSS overlay property chromestatus entry, developer feedback about the overlay property has shown that it creates bugs that are hard to track down, and Chrome engineers want to deprecate the property and keep the animated elements in the top layer automatically during their exit animations.

So this proposal is focused on making the display and content-visibility CSS properties be animatable.

Specification

https://drafts.csswg.org/css-display-4/#display-animation and https://drafts.csswg.org/css-contain-3/#content-visibility-animation

web-feature

display-animation

Test Links

https://wpt.fyi/results/?label=experimental&label=master&aligned&q=feature%3Adisplay-animation

Additional Signals

• Top layer animations allow animating popovers, which is a highly requested feature.
• Developer signals issue 13 👍🏻
• Discrete Properties Animations was voted 13 in State of CSS 2026's favorite new CSS features you started using this year question.
• Discrete Properties Animations was also part of State of CSS 2025's features you have difficulty using because of lack of support.
• Past proposals:
  • Interop 2024 26 👍🏻, which was then split into 4 separate issues (The transition-behavior CSS property #580, The overlay CSS property #581, The @starting-style CSS rule #582, Making the display and content-visibility CSS properties animatable #583), with a total of 26 👍🏻.
  • Interop 2025 13 👍🏻
  • Interop 2026 21 👍🏻