앞 장면이 서서히 옅어지는 동안 다음 장면이 겹쳐 나타나는 전환입니다.
<div class="frame">
<div class="shot day"><i class="sun"></i><i class="ridge"></i><b>DAY</b></div>
<div class="shot night"><i class="moon"></i><i class="ridge"></i><b>NIGHT</b></div>
<div class="caption">A <span>+</span> B</div>
<div class="track"><i></i></div>
</div>.frame{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.shot{position:absolute;inset:0 0 17%;overflow:hidden}
.day{background:linear-gradient(145deg,#edc980,var(--accent-3));animation:day 3.6s ease-in-out infinite}
.night{background:linear-gradient(145deg,var(--accent-2),#19263b);opacity:0;animation:night 3.6s ease-in-out infinite}
.sun,.moon{position:absolute;left:18%;top:19%;width:clamp(34px,18vmin,100px);aspect-ratio:1;border-radius:50%;background:#fff1b1}
.moon{left:auto;right:18%;background:var(--surface);box-shadow:0 0 0 8px rgba(255,255,255,.12)}
.ridge{position:absolute;left:-5%;right:-5%;bottom:-27%;height:58%;border-radius:50% 50% 0 0;background:var(--fg);opacity:.68;transform:rotate(-5deg)}
.night .ridge{background:#101923;opacity:1;transform:rotate(5deg)}
.shot b{position:absolute;left:7%;bottom:9%;font-size:clamp(10px,3vmin,18px);letter-spacing:.22em;color:var(--surface)}
.caption{position:absolute;right:6%;top:6%;font:700 clamp(10px,2.7vmin,15px) ui-monospace,monospace;color:var(--fg)}
.caption span{color:var(--accent)}
.track{position:absolute;left:7%;right:7%;bottom:7%;height:2px;background:var(--line)}
.track i{display:block;width:50%;height:100%;background:var(--accent);animation:play 3.6s linear infinite}
@keyframes day{0%,32%{opacity:1}56%,100%{opacity:0}}
@keyframes night{0%,32%{opacity:0}56%,100%{opacity:1}}
@keyframes play{from{transform:translateX(0)}to{transform:translateX(100%)}}두 장면을 투명한 종이처럼 포개고 한쪽을 천천히 걷어 내는 방식입니다. 겹치는 동안 과거와 현재가 잠시 함께 보입니다.
편집 타임라인에서 두 클립을 겹치고 앞 클립의 불투명도를 낮추면서 뒤 클립을 올립니다. 웹에서는 두 레이어의 opacity를 반대 방향으로 키프레임 애니메이션하면 됩니다.
검은 화면을 거치는 페이드와 달리 두 장면이 직접 겹칩니다. 겹침이 길면 화면이 흐릿해지므로 시간 경과나 회상처럼 부드러운 이동에 쓰세요.
시간이 흐르거나 회상으로 넘어가는 느낌을 부드럽게 만들 때 쓰세요. 빠른 동작이나 또렷한 정보 전달에는 컷이 더 읽기 쉽습니다.