Animating display: none in Pure CSS with @starting-style and allow-discrete
For years, transitioning an element out of display: none required JavaScript workarounds to force a browser reflow. Modern CSS now offers two features, @starting-style and transition-behavior: allow-discrete, that remove this need. @starting-style defines the initial style snapshot when an element appears or leaves display: none, enabling smooth entry animations. The allow-discrete behavior delays switching to display: none until exit transitions finish. Both features reached Baseline 2024 availability across Chrome, Safari, and Firefox, and the article includes fallback guidance for older browsers.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.
Discussion (0)
Log in to join the discussion and vote.
Log in