플래시 프레임

<div class="frame">
  <div class="picture">
    <div class="shot"><i></i><b>FRAME A</b></div>
    <div class="next"><i></i><b>FRAME B</b></div>
    <div class="flash"></div>
  </div>
  <div class="film"><span>A</span><i></i><b>1–2 FRAMES</b><i></i><span>B</span><em></em></div>
</div>

.frame{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.picture{position:absolute;inset:0 0 22%;overflow:hidden;background:#18212d}
.shot,.next{position:absolute;inset:0;display:grid;place-items:center}
.shot{background:linear-gradient(135deg,#d7a86b,#9c4d39);animation:a 3.6s steps(1,end) infinite}
.next{background:linear-gradient(135deg,#275e68,#182b45);opacity:0;animation:b 3.6s steps(1,end) infinite}
.shot i,.next i{width:clamp(46px,24vmin,130px);aspect-ratio:1;border-radius:50% 50% 10% 10%;background:var(--surface);transform:rotate(45deg)}
.next i{border-radius:8%;transform:rotate(45deg);background:var(--accent)}
.shot b,.next b{position:absolute;left:6%;bottom:7%;font:700 clamp(9px,2.3vmin,13px) ui-monospace,monospace;letter-spacing:.14em;color:var(--surface)}
.flash{position:absolute;inset:0;background:#fff;opacity:0;animation:flash 3.6s steps(1,end) infinite}
.film{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:.08em}
.film i{position:absolute;left:22%;right:22%;height:2px;background:var(--line)}
.film b{position:absolute;left:50%;transform:translateX(-50%);padding:0 5px;background:var(--bg);color:var(--accent)}
.film em{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--accent-3);animation:cursor 3.6s linear infinite}
@keyframes a{0%,49.4%{opacity:1}49.5%,100%{opacity:0}}
@keyframes b{0%,49.4%{opacity:0}49.5%,100%{opacity:1}}
@keyframes flash{0%,49.4%{opacity:0}49.5%,50.5%{opacity:.94}51%,100%{opacity:0}}
@keyframes cursor{from{left:0}to{left:100%}}