Movement & Transforms · Move, rotate, scale
Origin-aware animation从触发点生长
- coherent
- causal
- refined
The popover grows out of the button that was clicked and returns to the same point when it closes, so its origin is obvious at a glance.
When to use it
Use it for any overlay that appears where you clicked; for whole-page changes unrelated to a trigger, use “Shared element transition”.
Parameters
clip-path: circle(0% at origin)→circle(140% at origin) · 240ms · ease-out
Recipe
Origin-aware animation → clip-path circle(0% at origin) → circle(140% at origin) @ 240ms ease-out
One sentence for your AI
Expand this menu from the clicked button's position: clip-path from circle(0% at button) to circle(140% at button), 240ms ease-out, reversing on close.