Respects prefers-reduced-motion: the animation is disabled and the final state is shown.
What is a Toast Notification?
A toast confirms something without stealing focus — it slides in from the edge, rests long enough to read, then slips away. The motion is a single translate plus a fade; the timing (in, hold, out) matters more than the easing. Keep it short and out of the way of primary content.
Animation Specimen
Trigger
click
Tech
css
Duration
3s
Easing
cubic-bezier(0.16, 1, 0.3, 1)
Performance
transform, opacity
When to use
Save / send / copy confirmations
Non-blocking status after an action
Avoid when
For errors that need a choice — use a dialog
Stacked with more than 3 at once
The hold is the message. Too short and nobody reads it; too long and it nags.