슬로우 인 슬로우 아웃

<div class="rows">
  <div class="row">
    <span class="tag">Linear</span>
    <div class="track" id="trackLin"><i class="ball"></i></div>
  </div>
  <div class="row">
    <span class="tag">Slow in / slow out</span>
    <div class="track" id="trackEase"><i class="ball ease"></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:.55}
.ball{position:absolute;top:50%;left:0;width:20px;height:20px;margin-top:-10px;border-radius:50%;background:var(--accent);
  box-shadow:0 2px 6px rgba(0,0,0,.2);animation:moveTrack 2.2s linear infinite}
.ball.ease{background:var(--accent-3);animation:moveTrack 2.2s ease-in-out infinite}
@keyframes moveTrack{from{left:0}to{left:calc(100% - 20px)}}

function easeInOutQuad(t) { return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2; }
const linTrack = document.getElementById('trackLin');
const easeTrack = document.getElementById('trackEase');
for (let i = 0; i <= 8; i++) {
  const fLin = i / 8;
  const fEase = easeInOutQuad(i / 8);
  const t1 = document.createElement('i');
  t1.className = 'tick';
  t1.style.left = 'calc((100% - 20px) * ' + fLin + ' + 9px)';
  linTrack.appendChild(t1);
  const t2 = document.createElement('i');
  t2.className = 'tick';
  t2.style.left = 'calc((100% - 20px) * ' + fEase + ' + 9px)';
  easeTrack.appendChild(t2);
}