Newly available
This feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Chrome
Edge
Firefox
Safari
Animate In
An element that appears, or leaves display: none, has no previous style to transition from. The @st: variant gives it one, 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.
Fade & Grow
Stack more than one starting value. The transition has to cover them, so tp:a or a Transition Property that names each one.
<div className="tp:a tdu:150 ttf:eo @st:o:0 @st:s:90">Settings</div>
With Breakpoints
@st: is an at-rule, so it nests inside a breakpoint.
<div className="tp:o tdu:150 @md:@st:o:0"></div>
@st: only covers the way in. To animate an element on its way out, style
the state your component library sets while it leaves with
States.