Jump cut

<div class="frame">
  <div class="room"><i class="window"></i><i class="table"></i><div class="person"><i class="head"></i><i class="body"></i><i class="arm"></i></div></div>
  <div class="time">00:04 <span>→</span> 00:09</div>
  <div class="ticks"><i></i><i></i><i></i><i></i><b>SKIP</b></div>
</div>

.frame{position:absolute;inset:0;overflow:hidden;background:linear-gradient(160deg,#dbe4d0,#afc8b5)}
.room{position:absolute;inset:0 0 20%;overflow:hidden}
.window{position:absolute;left:9%;top:10%;width:30%;height:48%;border:2px solid var(--surface);background:linear-gradient(135deg,var(--accent-2),#d0e8d9)}
.table{position:absolute;left:0;right:0;bottom:0;height:24%;background:#76543d;clip-path:polygon(0 30%,100% 0,100% 100%,0 100%)}
.person{position:absolute;left:44%;bottom:18%;width:24%;height:62%;animation:jump 3.6s steps(1,end) infinite}
.head{position:absolute;left:31%;top:0;width:38%;aspect-ratio:1;border-radius:50%;background:#d29a70}
.body{position:absolute;left:18%;top:31%;width:64%;height:69%;border-radius:38% 38% 12% 12%;background:var(--accent-3)}
.arm{position:absolute;right:-20%;top:42%;width:55%;height:12%;border-radius:9px;background:#d29a70;transform:rotate(-22deg)}
.time{position:absolute;right:6%;top:7%;padding:5px 7px;background:var(--surface);color:var(--fg);font:700 clamp(9px,2.3vmin,13px) ui-monospace,monospace}
.time span{color:var(--accent)}
.ticks{position:absolute;left:7%;right:7%;bottom:7%;height:9%;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line)}
.ticks i{width:2px;height:65%;background:var(--accent-3)}
.ticks b{position:absolute;left:46%;top:-.7em;padding:0 5px;background:var(--bg);font:700 clamp(8px,2vmin,11px) ui-monospace,monospace;color:var(--accent);letter-spacing:.12em}
@keyframes jump{0%,24.9%{transform:translate(0,0)}25%,49.9%{transform:translate(26%,-4%)}50%,74.9%{transform:translate(-9%,1%)}75%,100%{transform:translate(16%,-3%)}}