스미어 프레임

<div class="rows">
  <div class="row">
    <span class="tag">No smear</span>
    <div class="track"><i class="ball plain"></i></div>
  </div>
  <div class="row">
    <span class="tag">Smear frame</span>
    <div class="track"><i class="ball smear"></i></div>
  </div>
</div>

.rows{position:absolute;inset:14% 6%;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:24px}
.track::before{content:'';position:absolute;top:50%;left:0;right:0;height:2px;margin-top:-1px;background:var(--line)}
.ball{position:absolute;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--accent)}
.plain{animation:swing 1.6s ease-in-out infinite}
.smear{background:var(--accent-2);animation:swing 1.6s ease-in-out infinite, stretch 1.6s ease-in-out infinite}
@keyframes swing{
  0%{left:6%}
  25%{left:calc(50% - 11px)}
  50%{left:calc(94% - 22px)}
  75%{left:calc(50% - 11px)}
  100%{left:6%}
}
@keyframes stretch{
  0%,50%,100%{transform:scaleX(1) scaleY(1)}
  12.5%,87.5%{transform:scaleX(2.2) scaleY(.55)}
  37.5%,62.5%{transform:scaleX(2.2) scaleY(.55)}
}