Repository navigation
display-animation #1112
Description
Description
Animating discrete CSS properties, particularly display, has long been a significant challenge for web developers. Previously, achieving smooth entry and exit animations, like fading an element out before removing it from the document flow with display: none, required complex and often brittle JavaScript workarounds. This limitation complicated the implementation of common UI patterns such as toasts, popovers, accordions, and other components that appear and disappear.
The introduction of new CSS features, specifically the transition-behavior property with its allow-discrete value, and the @starting-style at-rule, provides a native and robust solution. These additions to the CSS Transitions specification allow developers to apply transitions to properties that change in discrete steps. This enables animations to run before a property like display changes from block to none, or to define a starting state for an element that is newly added to the DOM. Achieving cross-browser interoperability for these features is crucial for simplifying developer workflows and enabling more polished, performant, and accessible user interfaces across the web.
cc: @flackr
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
Additional Signals
Standards Positions:
- Gecko: Display and content-visibility animations mozilla/standards-positions#762
- WebKit: Positive - Display and content-visibility animations WebKit/standards-positions#147
Browser Bugs:
Activity
github-actions commentedon Sep 22, 2025
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.wpt-interop commentedon Feb 12, 2026
Thank you for proposing display-animation for Interop 2026.
We want to let you know it was not selected to be part of Interop this year.
On behalf of the entire Interop team, thank you for submitting it 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.
Posted on behalf of the Interop team.