Fade through

페이드 스루

The old screen fades out completely, then the new one fades in while scaling up slightly. They never overlap.

Also known as: Fade through patternCross-fade with scale
···
html
<div class="stage"><div class="s a fo">A</div><div class="s b fi">B</div></div>
css
.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)}}

One of Material Design's four transition patterns. A cross-dissolve (→ dissolve) overlaps the two screens, but fade through makes **the outgoing screen vanish first** and only then brings in the new one, which grows from about 92% to 100% for a touch of depth.

It is meant for screens with a **weak relationship** — bottom-nav tabs like Home / Search / Profile. It deliberately avoids implying spatial continuity; it only says "you moved to another peer screen."

Since nothing overlaps, text never ghosts through text. The cost is a brief empty moment in the middle, so keep the whole thing short (about 300 ms).

When to use

Use it for same-level switches such as bottom tabs or sidebar items. For hierarchy, use a push or shared axis.

Open as page ↗

Suggest an entry

Tell us about a term, effect or component that’s missing. We read every suggestion.