새 화면이 기존 화면 위로 덮이며 들어오는 전환. 기존 화면은 제자리에 머뭅니다.
<div class="stage"><div class="s a">A</div><div class="scrim"></div><div class="s b over">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)}
.scrim{position:absolute;inset:0;background:#000;opacity:0;animation:scrim 3.6s ease infinite}
.over{animation:cover 3.6s cubic-bezier(.2,.8,.2,1) infinite;box-shadow:0 0 30px rgba(0,0,0,.5)}
@keyframes cover{0%,15%{transform:translateY(100%)}40%,70%{transform:translateY(0)}95%,100%{transform:translateY(100%)}}
@keyframes scrim{0%,15%{opacity:0}40%,70%{opacity:.4}95%,100%{opacity:0}}커버는 새 화면이 **위에 쌓이는** 전환입니다. 아래 화면은 움직이지 않거나 살짝 어두워지는 정도라서, 사용자는 "지금 화면 위에 잠깐 무언가를 올렸다"고 읽습니다. iOS 의 모달 시트(아래에서 올라오는 화면)와 안드로이드의 바텀 시트가 이 방식입니다.
두 화면이 연속된 흐름이 아니라 **잠깐 들렀다 돌아올 화면**일 때 어울립니다. 닫으면 반대로 덮개가 걷히며 원래 화면이 그대로 남아 있으므로, 사용자가 위치를 잃지 않습니다.
기존 화면 위에 반투명 검은 막(스크림)을 깔고 어둡게 하면 "아래는 지금 비활성"이라는 신호가 됩니다.
작성 화면·필터·공유 시트처럼 "끝내고 돌아올" 작업에 쓰세요. 깊이 들어가는 탐색에는 푸시가 맞습니다.