I’ve been making YouTube videos on CSS for over 8 years now, and one question that I’ve got on a regular basis is how to transition to and from display: none.

For a long time, the answer was “it’s complicated”, but now, with allow-discrete and @starting-style, it’s actually pretty easy!

Here’s a quick example of how we can use them together for a dialog.

dialog {
  opacity: 0;
  display: none;

  transition: opacity 1s, display 1s, overlay 1s;
  transition-behavior: allow-discrete;
}

dialog[open] {
  opacity: 1;
  display: block;

  @starting-style {
    opacity: 0;
  }
}

In that code block, I’m also transitioning overlay because dialogs are brought onto the top layer when they are opened, and transitioning it prevents strange z-index things popping up during the transition.

Browser support

As of the time of publishing this article, Firefox doesn’t support either one of them (it does support @starting-style, but not to and from display: none).

However, they can still be used as progressive enhancements.

Dive deeper

If you’d like to learn more about how it’s working, here are some great posts that include interactive examples:

• Four new CSS features for smooth entry and exit animations
• Using @starting-style and transition-behavior for enter and exit stage effects

Or you can watch this video where I break it down in a lot more detail.