移動と変形 · 動かす・回す・拡大縮小
起点に合わせた動き从触发点生长
- 一貫性
- 因果が明快
- 上質
ポップオーバーがクリックされたボタンの位置から伸び、閉じるときも同じ点に戻ります。どこから出たのかが一目で分かります。
使いどころ
「ここを押したらここに出る」浮き要素には必ず使います。トリガーと無関係なページ全体の切り替えには「共有要素トランジション」を使います。
パラメータ
clip-path: circle(0% at origin)→circle(140% at origin) · 240ms · ease-out
レシピ
起点に合わせた動き → clip-path circle(0% at origin) → circle(140% at origin) @ 240ms ease-out
AI に渡す一文
このポップアップメニューをクリックしたボタンの位置から展開させてください。clip-path を circle(0% at ボタン位置) から circle(140% at ボタン位置) へ、240ms、ease-out、閉じるときは逆再生します。