Fade to / from black

<div class="frame">
  <div class="picture">
    <div class="shot before"><i></i><b>EVENING</b></div>
    <div class="shot after"><i></i><b>MORNING</b></div>
    <div class="veil"></div>
  </div>
  <div class="timeline"><span>A</span><i></i><b>BLACK</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:#08090d}
.shot{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.before{background:linear-gradient(150deg,#c27b49,#352d47);animation:before 3.6s steps(1,end) infinite}
.after{background:linear-gradient(150deg,#f2cf8c,#79a98b);opacity:0;animation:after 3.6s steps(1,end) infinite}
.shot i{width:clamp(36px,18vmin,100px);aspect-ratio:1;border-radius:50%;background:#f7d997;box-shadow:0 0 0 20px rgba(255,255,255,.12)}
.after i{background:var(--surface);box-shadow:none}
.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:#000;opacity:0;animation:fade 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(--muted);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 fade{0%,36%{opacity:0}48%,54%{opacity:1}68%,100%{opacity:0}}
@keyframes cursor{from{left:0}to{left:100%}}