장면 사이에 흰 화면을 밝게 올렸다가 다음 샷을 드러내는 전환입니다.
<div class="frame">
<div class="picture">
<div class="shot before"><i></i><b>NOW</b></div>
<div class="shot after"><i></i><b>MEMORY</b></div>
<div class="veil"></div>
</div>
<div class="timeline"><span>A</span><i></i><b>WHITE</b><i></i><span>B</span><em></em></div>
</div>.frame{position:absolute;inset:0;background:var(--bg);overflow:hidden}
.picture{position:absolute;inset:0 0 22%;overflow:hidden;background:var(--surface)}
.shot{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.before{background:linear-gradient(145deg,#25596d,#97b8ad);animation:before 3.6s steps(1,end) infinite}
.after{background:linear-gradient(145deg,#e9c57e,#d98560);opacity:0;animation:after 3.6s steps(1,end) infinite}
.shot i{width:clamp(40px,22vmin,120px);aspect-ratio:1;border-radius:28% 72% 50% 50%;background:var(--accent);transform:rotate(-20deg)}
.after i{border-radius:50%;background:var(--surface);transform:none;box-shadow:0 0 0 17px rgba(255,255,255,.22)}
.shot b{position:absolute;left:6%;bottom:7%;color:var(--surface);font:700 clamp(9px,2.3vmin,13px) ui-monospace,monospace;letter-spacing:.16em}
.veil{position:absolute;inset:0;background:#fff;opacity:0;animation:dip 3.6s ease-in-out infinite}
.timeline{position:absolute;left:7%;right:7%;bottom:6%;height:12%;display:flex;align-items:center;justify-content:space-between;color:var(--fg);font:700 clamp(8px,2vmin,11px) ui-monospace,monospace;letter-spacing:.1em}
.timeline i{position:absolute;left:21%;right:21%;height:2px;background:var(--line)}
.timeline b{position:absolute;left:50%;transform:translateX(-50%);color:var(--accent-2);background:var(--bg);padding:0 5px}
.timeline em{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--accent);animation:cursor 3.6s linear infinite}
@keyframes before{0%,47.9%{opacity:1}48%,100%{opacity:0}}
@keyframes after{0%,47.9%{opacity:0}48%,100%{opacity:1}}
@keyframes dip{0%,36%{opacity:0}48%,53%{opacity:1}67%,100%{opacity:0}}
@keyframes cursor{from{left:0}to{left:100%}}눈부신 빛에 잠깐 가려졌다 시야가 돌아오듯, 장면이 흰색으로 밝아진 뒤 다음 장면이 나타납니다. 밝은 회상이나 몽롱한 변화의 인상을 줄 수 있습니다.
앞 장면의 노출이나 흰 오버레이를 올려 화면을 채우고, 다음 샷을 흰색에서 서서히 드러냅니다. 키프레임 사이의 시간을 조절해 빛에 머무는 길이를 정합니다.
한두 프레임만 번쩍이는 플래시 프레임과 달리 흰 화면으로 들어갔다 나오는 시간이 있습니다. 짧은 번쩍임만 필요하면 페이드 대신 플래시 프레임을 쓰세요.
밝은 기억이나 의식이 흐려지는 순간을 표현할 때 제한적으로 사용하세요. 흰 장면이 밝은 내용 위에 묻히지 않는지 확인하세요.