GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

9 CSS Number Counter Animations — Copy-Paste Ready

· Godrich · 9 items · 17 min read

FeedbackSCSSCSS onlyHoverDashboard

A css number counter animation counts digits from zero to a target value with a single CSS property, no JavaScript needed for the count itself — nine below,

@property integer count-up01 number-counter-count-up-property Auto thousands separator02 number-counter-thousands-separator Decimal-point count-up03 number-counter-decimal-format Currency-prefixed amount count-up04 number-counter-currency-format Percent ring synced with the number05 number-counter-percent-ring Three staggered stat cards06 number-counter-stat-cards-stagger Starts only when scrolled into view07 number-counter-on-view-start Odometer-style rolling digits08 number-counter-odometer-roll Countdown timer09 number-counter-countdown-timer

Auto-plays · click a tile to jump to its section · all nine in one zip

The order below follows what happens to a single number as its job gets harder, not how popular each pattern is. 01 just counts. 02 solves the problem that shows up once the number gets big enough to need a comma. 03 adds precision instead of scale. 04 pins a unit symbol beside a number that keeps changing width. 05 splits one value across two visual channels at once. 06 lines several counters up next to each other. 07 decides for itself when to start. 08 counts a completely different way. 09 runs the whole thing in reverse, counting backward toward zero instead of up. Every code block below keeps only the lines that actually toggle; the full, uncut files are in the zip. When the photo beside the figure has to answer the pointer, the CSS image hover effects take that slot, and when what arrives one at a time is words rather than digits, that's the CSS chat bubble animations.

01@property integer count-up

How a css number count up animation runs

What actually animates between 0 and the target isn't the digit text itself — it's an integer custom property registered with @property, and counter() renders whatever that property currently holds as real digit glyphs.

Where it fits

That distinction is what keeps the animation smooth instead of jumping straight to the final number, and it's the base every other counter on this page builds from.

@property integer count-up
Open in a new tab

01 · @property integer count-up — Measured area 3.905% · moving frames 16/23Original by GODRICH · SCSS and React ship in the zip · See the password

@propertysyntax: '<integer>'counter()
@property --num {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}
.num {
  --num: 0;
  counter-reset: num var(--num);
  animation: count-up 2s ease-out infinite;
  &::before { content: counter(num); }
}
@keyframes count-up {
  0%   { --num: 0; }
  65%  { --num: 12480; }
  100% { --num: 12480; }
}

02Auto thousands separator

How it works

A comma at 12,483 doesn't fall out of counter() on its own — the thousands digit and the remaining three digits have to count as two separate @property integers, and the remainder needs a custom @counter-style with pad so it never drops a leading zero and reads as 12,3 by mistake.

Auto thousands separator
Open in a new tab

02 · Auto thousands separator — Measured area 2.662% · moving frames 16/23Original by GODRICH · SCSS and React ship in the zip · See the password

@counter-stylepad: 3 '0'counter(k) ',' counter(n)
@counter-style padded-3 {
  system: numeric;
  symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
  pad: 3 '0';
}
.num {
  counter-reset: k var(--k) n var(--n);
  &::before { content: counter(k) "," counter(n, padded-3); }
}

03Decimal-point count-up

How it works

A rating like 4.98 counts its whole and fractional parts as two @property integers running side by side, padding only the fraction to two digits with a counter style before joining it after a literal decimal point.

Where it fits

It's built for the values where the digits after the point carry the meaning — a star rating, a temperature, an average.

Decimal-point count-up
Open in a new tab

03 · Decimal-point count-up — Measured area 2.37% · moving frames 15/23Original by GODRICH · SCSS and React ship in the zip · See the password

value×100pad:2소수점 둘째 자리
@counter-style padded-2 {
  system: numeric;
  symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
  pad: 2 '0';
}
.num {
  counter-reset: whole var(--whole) frac var(--frac);
  &::before { content: counter(whole) "." counter(frac, padded-2); }
}

04Currency-prefixed amount count-up

How it works

The dollar sign lives in ::before, fixed and unmoving, while the digits animate separately through ::after's counter() — so the symbol never drifts sideways as the number climbs from one digit to three.

Where it fits

A price tag or a checkout total needs that symbol to hold its ground while everything to its right keeps changing.

Currency-prefixed amount count-up
Open in a new tab

04 · Currency-prefixed amount count-up — Measured area 3.635% · moving frames 16/23Original by GODRICH · SCSS and React ship in the zip · See the password

::before content통화 기호 고정$dur-enter
.num {
  counter-reset: num var(--num);
  animation: count-up .6s ease-out infinite;
  &::before { content: "$"; margin-right: 2px; }
  &::after  { content: counter(num); }
}

05Percent ring synced with the number

How it works

One integer @property drives two things at once: counter() renders it as the digit text, and the same value feeds a conic-gradient's fill angle through calc(var(--p) * 1%).

Where it fits

Because both read from the identical custom property, the ring and the number can never fall out of sync with each other.

Percent ring synced with the number
Open in a new tab

05 · Percent ring synced with the number — Measured area 2.993% · moving frames 15/23Original by GODRICH · SCSS and React ship in the zip · See the password

conic-gradient하나의 @property링+숫자 동기
.ring {
  --p: 0;
  background: conic-gradient($color calc(var(--p) * 1%), transparent 0);
  animation: fill-up 2s ease-out infinite;
}
.ring__num {
  counter-reset: p var(--p);
  &::before { content: counter(p) "%"; }
}

06Three staggered stat cards

How it works

Three cards that fill in at once are three numbers with nowhere for the eye to land first. animation-delay pushes each card's count-up 0.15 seconds behind the one before it, so the same three numbers read as a sequence instead of a single flash.

Where it fits

That's the kind of thing a dashboard summary row or a landing page's three headline stats needs.

Three staggered stat cards
Open in a new tab

06 · Three staggered stat cards — Measured area 1.303% · moving frames 15/23Original by GODRICH · SCSS and React ship in the zip · See the password

animation-delay0.15초 간격카드 3장
.card:nth-child(1) .num {
  animation: count-a 2s ease-out infinite;
}
.card:nth-child(2) .num {
  animation: count-b 2s ease-out infinite;
  animation-delay: .15s;
}
.card:nth-child(3) .num {
  animation: count-c 2s ease-out infinite;
  animation-delay: .3s;
}

07Starts only when scrolled into view

How it works

A number that's already counted up by the time the page finishes loading wastes the whole effect on anyone who scrolls down to find it.

Where it fits

An IntersectionObserver watches for the card to cross a 60% visibility threshold and only then toggles a class that starts the count — until that happens, the number just sits at 0.

Starts only when scrolled into view
Open in a new tab

07 · Starts only when scrolled into view — Measured area 6.182% · moving frames 20/23Original by GODRICH · SCSS and React ship in the zip · See the password

IntersectionObserverthreshold .6보이기 전 0
var card = document.querySelector('.card');
new IntersectionObserver(function (es) {
  card.classList.toggle('is-counting', es[0].isIntersecting);
}, { threshold: .6 }).observe(card);

// .num defaults to animation-play-state: paused
// only .is-counting .num switches it to running

08Odometer-style rolling digits

How it works

Each digit slot gets its own vertical strip of 0 through 9, and rolling it to the target digit with transform: translateY() makes that one column spin on its own. That's the same way a mechanical odometer's wheels each turn independently rather than the whole display flashing to a new value at once.

Where it fits

Three strips lined up read as one number, but every digit gets there its own way.

Odometer-style rolling digits
Open in a new tab

08 · Odometer-style rolling digits — Measured area 0.96% · moving frames 15/23Original by GODRICH · SCSS and React ship in the zip · See the password

translateY 스트립자릿수별 독립기계식 계기판
.digit {
  height: 44px;
  overflow: hidden;                                   // only one row of the strip shows at a time
}
.strip {
  transform: translateY(0);                           // the keyframes below drive the value directly
  animation: roll-to-8 2s cubic-bezier(.2, 1.4, .4, 1) infinite;

  span { height: 44px; }
}
@keyframes roll-to-8 {
  0%        { transform: translateY(0); }
  60%, 100% { transform: translateY(-80%); }          // stops on the eighth row (-80%)
}

09Countdown timer

How it works

Flip the same @property integer to count down toward 0 instead of up toward a target, and the identical mechanism that powers every counter above becomes a deadline instead of a tally. A thin bar underneath scales down in lockstep, reading currentColor from the same parent through transform: scaleX(calc(var(--t) / 9)).

Where it fits

The color shifts to a warning tone in the animation's back half, so the number and the bar carry that urgency together instead of the digits doing all the work alone.

Countdown timer
Open in a new tab

09 · Countdown timer — Measured area 1.755% · moving frames 12/23Original by GODRICH · SCSS and React ship in the zip · See the password

역방향 카운트0으로 수렴경고색 전환
@keyframes count-down {
  0%   { --t: 9; color: $color; }
  60%  { --t: 3; color: $color; }
  85%  { --t: 0; color: $error; }
  100% { --t: 0; color: $error; }
}
.counter__bar::after {
  transform: scaleX(calc(var(--t) / 9));
  background: currentColor;
}

Where it breaks — the traps

The @property floor

Every one of these nine counters rests on the same assumption: that @property itself is available. It's supported in Chrome and Edge from version 85, Safari from 16.4, and Firefox from 128, per caniuse's @property support table. Below those versions, none of the digits animate at all — no error, no broken layout, just the final number sitting there from the first paint, with the counting motion simply gone.

Generated digits aren't text

The second trap is what counter() actually is. The digits it renders are generated content, not real text — they can't be selected by dragging a mouse across them, and a screen reader skips them entirely, exactly as MDN's generated content documentation describes. Every one of the nine demos here answers that by planting a second, visually hidden span next to the counter that holds the real final number as plain text a screen reader can actually announce. Open the archive that already has that fallback wired into every file with j9xejany, typed exactly as it appears on this line, no spaces added anywhere.

Restarting on re-entry

The third trap only shows up on a counter like 07, which restarts when it re-enters the viewport. An animation that finished under animation-fill-mode: forwards doesn't play again just because a class gets removed and re-added — the browser sees no change worth acting on. Making a card count every time it scrolls back into view means forcing a reflow between removing and re-adding that class, not just toggling it. Scaled up until the figures themselves fill the screen, the same timing questions turn into typography — the kinetic typography teardown works through what breaks at that size.

Accessibility

Reduced motion

All nine settle instantly on the finished number once prefers-reduced-motion: reduce is set — the count itself never disappears, only the climbing motion does. Because counter()-generated digits are invisible to a screen reader, every demo here keeps a visually hidden span holding the real number as text, and that span stays regardless of the motion setting.

Color alone isn't the signal

Item 09's color shift toward a warning tone deserves a second look on its own. Check that the number itself, not just its color, is carrying the urgency, since color alone is never a safe way to signal "running out." MDN's prefers-reduced-motion page shows where that media query actually gets wired into a stylesheet.

Motion that fires on scroll position rather than on load gets its own set in 9 CSS scroll animations. Everything else this site covers lives under the CSS category hub, and what this site does and doesn't sell is on the about page.

FAQ

Does a pure css number counter animation need JavaScript?

No — for eight of the nine, the counting itself runs entirely on @property and a CSS @keyframes rule, with no script touching the number at any point. Item 07 is the one exception, and even there JavaScript only decides when to flip a class; a handful of lines calling IntersectionObserver handle that decision, not the counting itself. It's worth checking caniuse's @property support table first, since the whole approach depends on that one feature existing. The mark that sits beside a rising count and reports the press itself is the CSS heart and star rating animations.

Can I copy the digits counter() renders, since they're not real text?

For a number that's purely decorative, that's fine as-is. But if visitors need to actually select or copy the figure — a price on a checkout screen, say — swap in the visually hidden text span already sitting next to every counter in the zip and make that the visible element instead of the generated one.

Can the odometer style handle more than three digits?

Yes — item 08's approach scales to as many digit columns as the number needs; a five-figure count just means five strips instead of three, each rolling to its own target row with the same translateY math. The React version in the zip derives its digit columns straight from the value's own string length, so a bigger number renders more columns automatically, with no code change needed.

Enter the archive password

The password is inside this article. You will find it as you read.