Starting Style

Set where a transition starts when an element appears.

baselinenewly

Animate In

@st: gives an element that appears a style to transition from, so an enter animation is just classes.

<div className="tp:o tdu:150 @st:o:0">Saved to Documents</div>

The element renders at opacity: 0, then transitions to its normal opacity over 150ms.

Stack several starting values, with a Transition Property that covers each.

<div className="tp:a tdu:150 ttf:eo @st:o:0 @st:s:90">Settings</div>

@st: is an at-rule, so it nests inside a breakpoint.

<div className="tp:o tdu:150 @md:@st:o:0"></div>