Entrances & Exits · Entering & leaving
Scale out缩小退出
- receding inward
- taken away
- clean
The element shrinks as it fades, as if lifted off the screen. The shrink is small — around 0.9 is enough — because the point is that it receded, not that it collapsed into a dot.
When to use it
Use it when a popover closes, a card is dismissed, or something that floated up returns. It says one thing more than a fade-out: this came from somewhere and has gone back. Do not use it to clear a whole page — everything shrinking at once reads as a camera pull-back and feels dizzying.
Parameters
transform: scale 1→0.92 · opacity 1→0 · 180ms ease-in
Recipe
Scale out → transform: scale 1→0.92 · opacity 1→0 · 180ms ease-in
One sentence for your AI
Dismiss this popover by scaling it out: transform from scale(1) to scale(0.92) with opacity 1 to 0, over 180ms ease-in, keeping transform-origin at its own centre. Do not scale to 0 — that reads as being sucked into a point rather than stepping back.