Transitions Between States · A turns into B
Circle-origin reveal原点圆形扩散
- grows from that point
- rippling
- one whole layer
Tap the icon and the whole layer does not fade in or slide from an edge — it draws a circle from the icon's own position, growing until it covers the screen. Tap again and the circle shrinks back to the same point.
When to use it
Use it for full-screen menus, theme switches, and detail views opened from a button — people instantly see where it came from. If the layer has nothing to do with that button, the link misleads.
Parameters
transform-origin: centre of the tapped element · radius 0 → hypot(w, h) · 620ms cubic-bezier(.22,1,.36,1) · closes along the same path
Recipe
Circle-origin reveal → radius 0 → hypot w @ 620ms cubic-bezier(.22,1,.36,1)
One sentence for your AI
Reveal this menu from the button origin: take the centre of the tapped element as the circle centre, use clip-path: circle(radius at x y) and tween the radius from 0 to the distance that covers the farthest corner (the diagonal), over 620ms cubic-bezier(.22,1,.36,1). On close, shrink back along the same path. The layer's own size never changes.