Animate display: none in Pure CSS with Modern Features
The decade-long limitation is over as modern CSS introduces @starting-style and allow-discrete for native display: none animations in Baseline 2024.
Stock photo for illustration only, not from the actual event
- Pure CSS now natively supports animating elements transitioning from display: none without JavaScript.
- The @starting-style rule defines the initial styling state before an element becomes visible.
- The transition-behavior: allow-discrete property manages non-interpolatable property switches smoothly.
- These features achieved official Baseline 2024 cross-browser support across Chrome, Safari, and Firefox.
For over 10 years, transitioning elements from display: none was considered impossible in pure CSS without relying on JavaScript reflow workarounds such as requestAnimationFrame or void element.offsetWidth.
Those days are officially over. Modern CSS has introduced two game-changing features that achieved Baseline 2024 status across major browsers including Chrome, Safari, and Firefox.
Stock photo for illustration only, not from the actual event
To understand why this breakthrough is necessary, imagine a browser render engine operating like a Broadway theater stage, where hidden elements previously did not exist in the layout tree until rendered, preventing smooth entrance animations.
The introduction of @starting-style and allow-discrete solves a fundamental CSS architecture limitation. Previously, browsers completely ignored initial style computations for hidden elements. These new features allow browsers to prep the starting frame and gracefully delay the removal of discrete properties from the DOM tree without external libraries.
For fallback compatibility with older browsers, developers can utilize the @supports rule to safely target enhanced modern transitions:
- Check for support using transition-behavior: allow-discrete
- Apply enhanced animations only on supporting modern browsers
- Ensure graceful degradation for older environments
Source: Dev.to
Found something wrong in this article? Report an issue with this article
Comments
Leave a Comment