Design Atlas
한국어
↝ Motion

Count-up

카운트업

A number animating rapidly from zero (or its previous value) up to a target — common on dashboard stats and KPI cards.

Also known as: Number counter animationAnimated number
···
html
<div class="kpi"><span id="num">0</span><small>MAU</small></div>
css
.kpi{display:grid;justify-items:center;gap:4px}
#num{font:800 clamp(30px,11vmin,58px)/1 ui-monospace,monospace;color:var(--accent);font-variant-numeric:tabular-nums}
.kpi small{font:600 11px/1 sans-serif;letter-spacing:.14em;color:var(--muted)}
js
const el = document.getElementById('num');
const target = 48200;
function easeOut(t) { return 1 - Math.pow(1 - t, 3); }
function run() {
  const dur = 1600, start = performance.now();
  function frame(now) {
    const t = Math.min(1, (now - start) / dur);
    const v = Math.round(target * easeOut(t));
    el.textContent = v.toLocaleString('en-US');
    if (t < 1) requestAnimationFrame(frame); else setTimeout(run, 1200);
  }
  requestAnimationFrame(frame);
}
run();

A CSS transition can't interpolate the text of a number, so you need JS — requestAnimationFrame recalculating the current value and writing it into textContent every frame. Easing the progress (usually ease-out) makes it slow down as it arrives.

You can fake it in pure CSS by registering the number as a custom property with @property, but JS is still the more common implementation in practice. Always format large numbers with thousands separators.

When to use

Trigger it once, when the user arrives or when the value changes. Repeating it on every number in a list gets noisy.