새 장면이 들어오며 앞 장면을 화면 밖으로 밀어냅니다.
<div class="frame">
<div class="shot old"><i class="sun"></i><i class="hill"></i><b>01</b></div>
<div class="shot next"><i class="moon"></i><i class="hill"></i><b>02</b></div>
<div class="arrow">PUSH <span>→</span></div>
</div>.frame{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.shot{position:absolute;inset:0;overflow:hidden}
.old{background:linear-gradient(135deg,#f0d394,var(--accent-3));animation:old 3.6s ease-in-out infinite}
.next{background:linear-gradient(135deg,var(--accent-2),#182839);transform:translateX(100%);animation:next 3.6s ease-in-out infinite}
.sun,.moon{position:absolute;left:18%;top:19%;width:clamp(38px,20vmin,110px);aspect-ratio:1;border-radius:50%;background:#fff1b1}
.moon{left:auto;right:18%;background:var(--surface)}
.hill{position:absolute;left:-12%;right:-12%;bottom:-22%;height:60%;border-radius:50% 50% 0 0;background:var(--fg);opacity:.7;transform:rotate(-7deg)}
.next .hill{background:#101923;transform:rotate(7deg)}
.shot b{position:absolute;left:7%;bottom:9%;font:700 clamp(18px,5vmin,32px) ui-monospace,monospace;color:var(--surface)}
.arrow{position:absolute;right:5%;top:6%;padding:5px 8px;background:var(--surface);color:var(--fg);font:700 clamp(8px,2.2vmin,12px) ui-monospace,monospace;letter-spacing:.08em}
.arrow span{color:var(--accent)}
@keyframes old{0%,32%{transform:translateX(0)}62%,100%{transform:translateX(-100%)}}
@keyframes next{0%,32%{transform:translateX(100%)}62%,100%{transform:translateX(0)}}종이 한 장을 옆에서 밀어 다른 종이를 책상 끝으로 보내는 것처럼, 화면 전체가 한 방향으로 함께 움직입니다. 두 장면이 잠깐 나란히 보입니다.
새 클립을 화면 밖에 두고 위치를 프레임 안까지 옮기는 키프레임을 줍니다. 앞 클립도 같은 거리만큼 반대쪽으로 밀면 두 화면이 함께 이동합니다.
두 장면을 겹쳐 투명도를 섞는 디졸브와 달리 이동이 전환의 핵심입니다. 이동 방향은 장면의 시선이나 다음 동작과 맞추고, 불필요하게 빠르게 밀지 마세요.
화면 구성이나 장소를 명료하고 경쾌하게 바꿀 때 유용합니다. 이동 방향을 반복하면 장면마다 같은 리듬을 만들 수 있습니다.