Scale keyframe

<div class="stage"><div class="frame"><div class="frame-title">SCALE <b>100 → 145</b></div><div class="shape"><i></i><i></i><i></i></div></div>
  <div class="timeline"><div class="ruler"><i></i><i></i><i></i><i></i><i></i></div><div class="track"><b class="key k1"></b><b class="key k2"></b><div class="playhead"></div></div><div class="values"><span>100%</span><span>145%</span></div></div>
</div>

.stage{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.frame{position:absolute;inset:0 0 28%;display:grid;place-items:center}
.shape{width:34%;height:56%;border:1px solid var(--accent);background:var(--surface);display:flex;flex-direction:column;justify-content:center;gap:8%;padding:7%;transform-origin:center;animation:scale 3.2s ease-in-out infinite alternate}
.shape i{display:block;height:3px;background:var(--line)}.shape i:first-child{width:90%;background:var(--accent)}.shape i:nth-child(2){width:70%}.shape i:nth-child(3){width:48%}
.frame-title{position:absolute;top:12px;left:12px;font:9px ui-monospace,monospace;color:var(--muted)}
.frame-title b{color:var(--fg);margin-left:6px}
.timeline{position:absolute;left:12px;right:12px;bottom:12px;height:26%;border-top:1px solid var(--line);padding-top:9px}
.ruler{display:flex;justify-content:space-between;height:9px;border-bottom:1px solid var(--line)}
.ruler i{width:1px;height:5px;background:var(--muted)}
.track{position:relative;height:30px;margin-top:9px;background:var(--surface);border:1px solid var(--line)}
.key{position:absolute;top:8px;width:10px;height:10px;background:var(--accent);transform:rotate(45deg)}.k1{left:4%}.k2{right:4%}
.playhead{position:absolute;left:0;top:-10px;bottom:0;width:1px;background:var(--fg);animation:head 3.2s linear infinite}
.values{display:flex;justify-content:space-between;margin-top:5px;font:9px ui-monospace,monospace;color:var(--muted)}
@keyframes scale{0%{transform:scale(.8)}100%{transform:scale(1.34)}}
@keyframes head{0%{left:4%}100%{left:96%}}