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
feature:display-animation
Additional Signals
Standards Positions:
Browser Bugs:
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
feature:display-animation
Additional Signals
Standards Positions:
Browser Bugs: