Entrances & Exits · Entering & leaving
Fade out淡出
- light
- receding
- no second look
The element turns transparent in place until nothing is left. Position, size and shape never move, so what the viewer sees is “it left”, not “it was taken away”. It is not the fade-in curve played backwards: entrances decelerate (slowing to a stop), exits accelerate (speeding away).
When to use it
Use it when content has done its job and the viewer does not need to remember where it came from. If something new takes the same spot right away, use a crossfade instead; if the thing should feel taken away rather than leaving, use scale-out.
Parameters
160ms · ease-in · opacity: 1→0
Recipe
Fade out → 160ms · ease-in · opacity: 1→0
One sentence for your AI
Fade this content out over 160ms with an ease-in curve (accelerating away). Change opacity only — no movement, no scaling. Do not use ease-out; that is the entrance curve, and it makes an exit feel sluggish.