Post

We've waited like 20 years for this? display: none → display: block; youtu.be/3QUOstYE7-Q

youtube.comCSS 20 years in the making?Did you know you can now transition from `display: none` to `displa...

It relies on two properties... 1️⃣ transition-behavior Set it to allow-discrete to allow for discrete animated properties. developer.mozilla.org/en-US/docs/...

developer.mozilla.orgtransition-behavior CSS property - CSS | MDNThe transition-behavior CSS property specifies whether transitions will be started for properties whose animation behavior is discrete.

Chris Pennington

@codinginpublic.dev

P.S. with dialog, popover, etc. you'll likely need to transition both display and overlay like this 👇

5/8/26, 12:43 pm0 reposts4 likes

Chris Pennington

@codinginpublic.dev

5 Aug

2️⃣ @⁠starting-style Define the starting style to control the entrance animation. developer.mozilla.org/en-US/docs/...

developer.mozilla.org@starting-style CSS at-rule - CSS | MDNThe @starting-style CSS at-rule is used to define starting values for properties set on an element that you want to transition from when the element receives its first style update, i.e., when an element is first displayed on a previously loaded page.