Dip to white

<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%}}