登場と退場 · 出てくる・消える
ポップアウト弹出退出
- 一度ふくらむ
- 主体的
- 弾む
要素がまず少しふくらみ(息を吸うように)、それから素早く縮んで消えます。この逆方向のひと拍が、切り取られたのではなく自分から去ったように見せます。縮小退出との違いはそれだけです。
使いどころ
ユーザーが自分で取り消すものに使います(ポップオーバーを閉じる、操作を取り消す、通知を消す)。システムによる自動整理や、ユーザーが予期していないものには使わないでください。ふくらみが陽気すぎます。
パラメータ
transform: scale 1→1.04→0.72 · opacity 1→0 · 240ms ease-in
レシピ
ポップアウト → transform: scale 1→1.04→0.72 · opacity 1→0 · 240ms ease-in
AI に渡す一文
ポップアウトを作ってください。transform をまず 1.04 まで(およそ 0–25%)ふくらませ、そこから 0.72 まで縮め、opacity を 1 から 0 へ、全体 240ms の ease-in で。最初のふくらみは短く。80ms を超えると「息継ぎ」ではなく「間」になります。