@starting-style

Animating something in from display: none

CaveatThere is nothing to transition from when an element appears: it had no previous style. @starting-style supplies that first frame. Without it the element simply snaps into place and the transition never runs.

FallbackThe rule has to match the same element in its shown state, and it must come after that rule in the sheet. Put it first and it loses on cascade order, silently.

.panel { opacity: 0; transition: opacity .3s; }
.open .panel { opacity: 1; }

/* the frame it starts from */
@starting-style {
  .open .panel { opacity: 0; }
}

Published 1 Aug 2026