기존 화면이 먼저 완전히 사라진 뒤 새 화면이 살짝 커지며 나타나는 전환. 두 화면이 겹치지 않습니다.
<div class="stage"><div class="s a fo">A</div><div class="s b fi">B</div></div>.stage{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.s{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font:800 clamp(16px,6vmin,30px)/1 sans-serif;color:#fff;letter-spacing:.04em}
.a{background:linear-gradient(135deg,#3b3b98,#1e1e4a)}
.b{background:linear-gradient(135deg,#f25c8a,#c9184a)}
.fo{animation:fo 3.6s ease infinite}
.fi{animation:fi 3.6s ease infinite}
@keyframes fo{0%,20%{opacity:1}35%,100%{opacity:0}}
@keyframes fi{0%,35%{opacity:0;transform:scale(.92)}55%,80%{opacity:1;transform:scale(1)}95%,100%{opacity:0;transform:scale(.92)}}머티리얼 디자인이 정리한 4가지 전환 패턴 중 하나입니다. 크로스 디졸브(→ dissolve)는 두 화면이 겹치는 구간이 있지만, 페이드 스루는 **나가는 화면이 먼저 사라지고 나서** 들어오는 화면이 나타납니다. 들어오는 화면은 92% 정도에서 100% 로 커지며 등장해 약간의 깊이감을 줍니다.
서로 **관계가 약한** 화면들(하단 탭의 홈 / 검색 / 프로필)을 오갈 때 쓰도록 만든 패턴입니다. 공간적으로 이어진 느낌을 일부러 주지 않아서, "같은 레벨의 다른 화면으로 갔다"는 것만 전달합니다.
겹치지 않으니 글자가 두 겹으로 비치지 않는다는 실용적 장점이 있습니다. 대신 중간에 빈 순간이 생기므로 전체 길이를 짧게(약 300ms) 잡으세요.
하단 탭·사이드바 항목처럼 같은 레벨의 화면 전환에 쓰세요. 위계 이동에는 푸시나 공유 축이 맞습니다.