What's new in CSS?

Transition from display: none

display none Transitions

We can also now transition elements that are shown/hidden using the display property! 😱

And not only that, you can also apply different entry and exit animations too.

/* ACTIVE STATE */
.modal[open] {
  translate: 0 0;
  display: block;
}

/* EXIT END STATE */
.modal {
  display: none;
  translate: 0 -100vh;
  transition: 0.7s;
  transition-behavior: allow-discrete;
}

/* ENTRY START STATE   */
@starting-style {
  .modal[open] {
    translate: 0 100vh;
  }
}

Visualing how it works

The below shows how the transition-behavior: allow-discrete rule works.

Going from display none to block

Snap change from none to block

@starting-style styles

active styles

0%the animation100%

Going from display block to none

Snap change from block to none

active styles

non-active styles

0%the animation100%

Transition from display: none

Menu