목록의 카드가 그대로 커져서 상세 화면이 되는 전환. 같은 요소가 변신하므로 두 화면의 연결이 분명합니다.
<div class="stage"><div class="list"><i></i><i></i><i></i></div><div class="card"><b>Card</b></div></div>.stage{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.list{position:absolute;inset:8% 8%;display:grid;grid-template-columns:repeat(3,1fr);gap:6%}
.list i{border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.card{position:absolute;left:41.5%;top:8%;width:17%;height:84%;border-radius:12px;display:flex;align-items:flex-start;justify-content:center;padding-top:10%;
background:linear-gradient(160deg,var(--accent),var(--accent-2));color:#fff;font:700 clamp(10px,3vmin,16px) sans-serif;
animation:grow 3.8s cubic-bezier(.4,0,.2,1) infinite}
.card b{opacity:1;animation:txt 3.8s ease infinite}
@keyframes grow{0%,15%{left:41.5%;top:8%;width:17%;height:84%;border-radius:12px}
45%,70%{left:0;top:0;width:100%;height:100%;border-radius:0}
100%{left:41.5%;top:8%;width:17%;height:84%;border-radius:12px}}
@keyframes txt{0%,15%{transform:scale(1)}45%,70%{transform:scale(1.8)}100%{transform:scale(1)}}눌린 카드(컨테이너)의 **경계가 확장되어 다음 화면의 영역이 되는** 전환입니다. 머티리얼에서는 컨테이너 트랜스폼, 플러터에서는 히어로, 웹에서는 공유 요소 전환(View Transitions API 의 `view-transition-name`)이라고 부릅니다. 앱스토어의 오늘 탭 카드가 풀스크린 기사로 커지는 모션이 대표적입니다.
핵심은 **무엇을 눌렀는지가 다음 화면까지 이어진다**는 점입니다. 사용자는 화면이 바뀐 이유를 따로 해석하지 않아도 됩니다. 닫으면 같은 경로를 거꾸로 돌아가 원래 자리에 카드가 놓입니다.
카드 안의 내용(썸네일, 제목)은 확대되는 동안 다음 화면의 해당 요소로 이어 붙이고, 나머지는 페이드로 교체합니다. 이 연결이 어긋나면 그냥 확대 효과로 보입니다.
카드·썸네일을 눌러 상세로 가는 목록, 플로팅 버튼이 작성 화면으로 펼쳐지는 곳에 쓰세요. 눌린 요소가 없는 이동에는 쓸 수 없습니다.