Repository navigation
Support transition-behaviour for display and content-visibility #1384
Description
Description
This is support for animating the visibility of an object, which is very useful to transition the disappearance of an element.
This was proposed last year, but not selected: #1112
Specification
https://drafts.csswg.org/css-display-4/#display-animation
web-feature
https://web-platform-dx.github.io/web-features-explorer/features/display-animation/
Test Links
https://wpt.fyi/results/?q=feature:display-animation
Additional Signals
- Gecko: Display and content-visibility animations mozilla/standards-positions#762
- WebKit: Positive - Display and content-visibility animations WebKit/standards-positions#147
- 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-behaviorCSS property #580, TheoverlayCSS property #581, The@starting-styleCSS rule #582, Making thedisplayandcontent-visibilityCSS properties animatable #583), with a total of 26 👍🏻. - Interop 2025 13 👍🏻
- Interop 2026 21 👍🏻
- Interop 2024 26 👍🏻, which was then split into 4 separate issues (The
Reacted by John P. Green, Nilesh Prajapati, Christopher Kirk-Nielsen, phantomxx29474, Valtteri Laitinen, Michael, thaddeusleaf-spec, dsenneff, Alexander Lehner, Jayden Pearse and 35 more
Activity
github-actions commentedon Sep 9, 2026
This comment was automatically generated based on the information you provided. Please don't edit it.
Below is additional information about the web feature (from the web-features project) which is referenced in your proposal.
If this doesn't accurately correspond to your proposal, please update your initial comment to include
web-features: <feature-id>.To find feature IDs, use the web-features explorer.
Feature display animation
display: noneand any otherdisplayvalue or animate betweencontent-visibility: hiddenand any othercontent-visibilityvalue. This also applies to transitions.displayCSS property,content-visibilityCSS propertyphantomxx29474 commentedon Sep 9, 2026
Firefox have been working on a prototype for animating display and content-visibility animations in their group.
Source: https://groups.google.com/a/mozilla.org/g/dev-platform/c/VPL2DbXUu7c
mfreed7 commentedon Oct 2, 2026
So the other related issue (#1456) was clear that the
overlayproperty is explicitly not covered, but this issue is less clear. Can we be explicit that this issue does not cover theoverlayproperty?phantomxx29474 commentedon Oct 3, 2026
We should also include the overlay property as well.
captainbrosset commentedon Oct 5, 2026
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.
I agree with @mfreed7 that this proposal should exclude the
overlayproperty, and only focus on animatingdisplayandcontent-visibility, which is the final platform gap that will make top layer elements, like elements, or elements with the popover attribute, animatable as they enter and exit the top layer.