Entrances & Exits · Entering & leaving
Pop out弹出退出
- a breath first
- deliberate
- springy
The element puffs up a little first — a breath — then snaps away. That one reversed beat is what makes the disappearance look deliberate rather than a hard cut, and it is the only thing separating this from scale-out.
When to use it
Use it for things the user actively dismisses: closing a popover, undoing an action, clearing a notification. Do not use it for system clean-up or anything the user did not expect — the puff reads as too cheerful.
Parameters
transform: scale 1→1.04→0.72 · opacity 1→0 · 240ms ease-in
Recipe
Pop out → transform: scale 1→1.04→0.72 · opacity 1→0 · 240ms ease-in
One sentence for your AI
Build a pop-out: transform scales up to 1.04 across roughly 0–25%, then down to 0.72, with opacity falling 1 to 0, all over 240ms ease-in. Keep the puff short — past about 80ms it stops reading as a breath and becomes a pause.