MotionLang

登場と退場 · 出てくる・消える

ポップアウト弹出退出

要素がまず少しふくらみ(息を吸うように)、それから素早く縮んで消えます。この逆方向のひと拍が、切り取られたのではなく自分から去ったように見せます。縮小退出との違いはそれだけです。

ツールでこの項目を開く

使いどころ

ユーザーが自分で取り消すものに使います(ポップオーバーを閉じる、操作を取り消す、通知を消す)。システムによる自動整理や、ユーザーが予期していないものには使わないでください。ふくらみが陽気すぎます。

パラメータ

transform: scale 1→1.04→0.72 · opacity 1→0 · 240ms ease-in

レシピ

  1. ポップアウト → 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 を超えると「息継ぎ」ではなく「間」になります。

同じカテゴリの動き