Transitions Between States · A turns into B
Card unfurl to fullscreen卡片撑满全屏
- like opening a frame
- stays sharp
- corners follow
Tap a rounded card and it grows, corners and all, until it fills the screen — while the image inside shrinks in the opposite direction. It reads as a viewfinder opening rather than a photo zooming, so nothing blurs on the way.
When to use it
Use it for list-to-detail, gallery zoom, and card navigation. If the target is another page with no shared element, a shared-element transition fits better.
Parameters
outer transform: scale .52 → 1 · inner image 1.3 → 1 (counter-scale) · border-radius calc(20px / scale) · 520ms cubic-bezier(.32,.72,0,1)
Recipe
Card unfurl to fullscreen → scale .52 → 1 @ 520ms cubic-bezier(.32,.72,0,1)Card unfurl to fullscreen → image 1.3 → 1 counter-scale @ 520ms
One sentence for your AI
Unfurl this card in place to fullscreen: take the outer frame from scale .52 to 1 while the inner image goes the opposite way from 1.3 to 1 (the two scales multiply to about 1, so the image keeps its real pixel size and stays sharp). Compensate the corners with border-radius: calc(20px / current scale) and run the whole thing over 520ms cubic-bezier(.32,.72,0,1).