25 CSS Number Counter Animations

A number counter animation is a small interaction where a static figure — revenue, user count, uptime percentage — animates from zero (or another starting value) up to its real value, usually over 1–2.5 seconds with an easing curve. It's the most common motion pattern on SaaS landing pages, dashboard KPI cards, e-commerce sales tickers, fundraising meters, and gamified progress widgets because it gives an otherwise flat number a sense of arrival — drawing the reader's eye exactly where the design wants it. Use it above the fold on marketing pages (Demo 01 SaaS stats grid, Demo 07 live visitor widget), on internal dashboards (Demo 04 KPI card, Demo 24 B2B SaaS analytics), inside e-commerce checkout confirmations (Demo 03 live stock counter), and inside gamified UX (Demo 06 level-up, Demo 23 gaming score). Skip it on utility interfaces where a raw number is faster to read — data-dense tables and admin filter values shouldn't animate.

For a true count-up where the digits actually scroll through every intermediate value, you need a small amount of JavaScript — a requestAnimationFrame loop that interpolates a number from 0 to its target with an easing function, writing the rounded value into the element on every frame. CSS alone can animate visual properties (opacity, transform, width, stroke-dashoffset) but cannot drive a textNode through a numeric sequence. Modern CSS @property combined with counter() can build a pure-CSS counter — Demo 08 (Pure CSS Odometer) demonstrates this — but the rendered number tends to be a single typographic style with no easy way to format thousands separators, currency symbols, or locale-aware digits. Every JS demo here is ~15 lines, zero dependencies, and drops into React (useEffect), Vue (onMounted), Svelte (onMount), Astro (island), or vanilla with no changes.

Wrap the count-up logic in an IntersectionObserver — Demo 02 (Scroll-Triggered Count Up Statistics Grid) is the reference implementation. Create the observer with a threshold of 0.3 and a rootMargin: '0px 0px -10% 0px', point it at the counter's container, and when the entry intersects, start the requestAnimationFrame loop and disconnect the observer so it does not re-fire when the user scrolls back. This is the right pattern for any counter below the fold — without it, the animation runs while the section is still offscreen and the user arrives at a static final number that has already finished animating. If prefers-reduced-motion is set, skip the observer entirely and set the final value on mount so screen-reader users and motion-sensitive users see the correct number immediately. The observer disconnect is critical: leaked observers accumulate across page navigations and become a memory-leak class Google demotes on repeat interactions.

Use Intl.NumberFormat inside the RAF loop instead of raw String(value). Demo 09 (Currency Formatter Counter with Thousands Separators & K/M/B Suffixes) demonstrates the two most common shapes: new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(value) for $1,247,891 output, and a compact-notation form new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 }).format(value) for 1.2M / 890K / 4.5B output. Both are locale-aware, so shipping a Japanese, German, or Indian variant means changing the first argument only — no manual comma / thousand-separator handling. The Intl API is fully supported in every current browser (baseline 2019 for currency, 2021 for compact notation). Pair with a tabular-numeric font feature (font-variant-numeric: tabular-nums) on the container so the width doesn't jitter as digits change.

Yes. Every demo honors prefers-reduced-motion — when the user has requested less motion at the OS level, the count-up resolves to its final value instantly and the ambient breathing / rotation / pulse animations suppress, so the page is still complete and readable without any transient state. Numbers are rendered as real text in the DOM (not as background images or SVG paths), so screen readers announce the final value correctly. For counters that represent live data — Demo 03 (e-commerce stock), Demo 07 (live visitor widget), Demo 18 (stock ticker) — add aria-live='polite' on the parent so screen readers announce updates without interrupting the user's current focus. Every counter also pairs its number with a visible text label positioned adjacently so the screen-reader announcement reads as "Monthly Recurring Revenue, forty-two thousand dollars" rather than a naked "42000". Focus rings honor :focus-visible, all interactive controls have real <button> semantics, and keyboard-only users can trigger every counter that has a manual replay control.

The JavaScript is framework-agnostic — Demo 05 (Tailwind CSS Animated Number Counter Badge) shows the Tailwind v4 @theme keyframe registration pattern for classes-only styling. For React, wrap the RAF loop in a useEffect(() => { … }, []) that runs once on mount and writes to a ref attached to the number span — the framework's render cycle never re-runs on every animation frame (which would tank INP). For Vue, use onMounted + ref; for Svelte, onMount + bind:this; for Angular, @ViewChild + ngAfterViewInit. In all four the HTML and CSS port unchanged — only the lifecycle hook wrapping the count-up loop changes. Strip the IIFE wrapper from the demo JS, expose the init function, and call it from your framework's mount hook. Compact-notation, currency formatting, IntersectionObserver gating, and reduced-motion checks all remain the same code.

Not if you build them right. requestAnimationFrame yields between frames, so a count-up loop cannot block the main thread for layout, paint, or input responsiveness. Each demo animates a single number (or a small handful in dashboard grids) — well under any performance budget. Two things to watch: writing to textContent triggers a re-layout if the number's character width changes across frames, so wrap the counter in a fixed-width container OR use font-variant-numeric: tabular-nums so every digit occupies the same width; and never count up a number below the fold without an IntersectionObserver gate, because you're spending main-thread frames on something the user cannot see (and Lighthouse penalizes off-screen animation on the Total Blocking Time metric). None of the 25 demos here measurably affect LCP, CLS, or INP in testing on a mid-tier 2024 Android device.