이그재저레이션

<div class="split">
  <div class="panel">
    <span class="tag">Subtle</span>
    <div class="floor"></div><i class="ball subtle"></i>
  </div>
  <div class="panel">
    <span class="tag">Exaggerated</span>
    <div class="floor"></div><i class="ball wild"></i>
  </div>
</div>

.split{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:3%}
.panel{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.tag{position:absolute;top:6%;left:0;right:0;text-align:center;font:700 10px/1 ui-monospace,monospace;color:var(--muted);z-index:2}
.floor{position:absolute;left:12%;right:12%;bottom:24%;height:2px;background:var(--line)}
.ball{position:absolute;left:50%;bottom:24%;--d:clamp(20px,14vmin,34px);width:var(--d);height:var(--d);
  margin-left:calc(var(--d) / -2);border-radius:50%;background:var(--accent);transform-origin:bottom center}
.subtle{animation:bsub 1.4s cubic-bezier(.5,0,.5,1) infinite}
.wild{background:var(--accent-2);animation:bwild 1.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes bsub{
  0%{transform:translateY(-16vmin) scale(1,1)}
  40%{transform:translateY(-16vmin) scale(.96,1.05)}
  46%{transform:translateY(0) scale(1.1,.92)}
  52%{transform:translateY(0) scale(.96,1.06)}
  58%{transform:translateY(-4vmin) scale(1,1)}
  100%{transform:translateY(-16vmin) scale(1,1)}
}
@keyframes bwild{
  0%{transform:translateY(-34vmin) scale(1,1)}
  40%{transform:translateY(-34vmin) scale(.8,1.25)}
  46%{transform:translateY(0) scale(1.55,.45)}
  52%{transform:translateY(0) scale(.7,1.35)}
  58%{transform:translateY(-9vmin) scale(1,1)}
  100%{transform:translateY(-34vmin) scale(1,1)}
}