Entry Animations From display:none

#@starting-stylestarting-style

Define where a transition starts when an element leaves display:none. No keyframes, no JavaScript.

live_demo

code

.starting-appear {
  display: none;
  opacity: 0;
  scale: 0.92;
  transition: opacity 0.45s, scale 0.45s, translate 0.45s,
    display 0.45s allow-discrete;
}

.starting-wrapper:has(input:checked) .starting-appear {
  display: flex;
  opacity: 1;
  scale: 1;
}

@starting-style {
  .starting-wrapper:has(input:checked) .starting-appear {
    opacity: 0;
    scale: 0.92;
    translate: 0 14px;
  }
}