타이밍과 스페이싱

<div class="rows">
  <div class="row">
    <span class="tag">4 in-betweens — fast, light</span>
    <div class="track" id="trackFast"><i class="ball fast"></i></div>
  </div>
  <div class="row">
    <span class="tag">14 in-betweens — slow, heavy</span>
    <div class="track" id="trackSlow"><i class="ball slow"></i></div>
  </div>
</div>

.rows{position:absolute;inset:12% 8%;display:flex;flex-direction:column;justify-content:space-around}
.row{display:flex;flex-direction:column;gap:8px}
.tag{font:700 10px/1 ui-monospace,monospace;color:var(--muted)}
.track{position:relative;height:20px}
.track::before{content:'';position:absolute;top:50%;left:0;right:0;height:2px;margin-top:-1px;background:var(--line)}
.tick{position:absolute;top:50%;width:2px;height:10px;margin-top:-5px;background:var(--muted);opacity:.5}
.ball{position:absolute;top:50%;left:0;width:20px;height:20px;margin-top:-10px;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.2);
  animation:moveTrack 2.2s infinite}
.ball.fast{background:var(--accent);animation-timing-function:steps(4)}
.ball.slow{background:var(--accent-2);animation-timing-function:steps(14)}
@keyframes moveTrack{from{left:0}to{left:calc(100% - 20px)}}

function ticks(container, n) {
  for (let i = 0; i <= n; i++) {
    const f = i / n;
    const t = document.createElement('i');
    t.className = 'tick';
    t.style.left = 'calc((100% - 20px) * ' + f + ' + 9px)';
    container.appendChild(t);
  }
}
ticks(document.getElementById('trackFast'), 4);
ticks(document.getElementById('trackSlow'), 14);