Transitioning to display: none in CSS

The trick that used to need a timeout: two extra lines and the element can animate out.

.popover {
  opacity: 0;
  display: none;
  transition: opacity 200ms ease, display 200ms allow-discrete;
}

.popover.is-open {
  opacity: 1;
  display: block;
}

@starting-style {
  .popover.is-open { opacity: 0; }
}

dialog::backdrop {
  background: rgb(15 23 42 / 0.4);
  transition: opacity 200ms ease, overlay 200ms allow-discrete;
}

How it works

1. transition-behavior: allow-discrete lets display take part.
2. @starting-style gives the browser a value to animate from on first paint.
3. overlay keeps a top-layer element visible while it animates away.

Keywords and builtins used here

• background
• display
• ms
• opacity
• popover
• rgb
• transition

The run, in numbers

Lines

19

Characters to type

322

Tokens

80

Three-star pace

90 tpm

At the three-star pace of 90 tokens a minute, this run takes about 53 seconds.

Type this snippet

Step 2 of 8 in Motion & effects, step 12 of 21 in Responsive & modern CSS.

← Previous Next →