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
Questions
Why does my transition not run when the element appears?
There is nothing to transition from — the element had no previous style, so the browser has no first frame to interpolate away from. @starting-style supplies that frame; without it the element simply snaps into place.
Do I need transition-behavior: allow-discrete as well?
Yes, for anything coming out of display: none. @starting-style gives the entry its first frame; allow-discrete is what lets a discrete property like display hold its visible value for the length of the transition instead of flipping immediately.
Why does my @starting-style rule get ignored?
It has to match the same element in its shown state and it has to come after that rule in the stylesheet. Put it first and it loses on cascade order — silently, with nothing in the console.