Odometer Number Animation
Digits roll up into place like a car odometer, each column on its own strip, with the right-hand columns spinning through extra turns. One keyframe, driven by a --to value per column.
Also known as: odometer css, rolling number counter, digit roll animation.
downloads this week
HTML
<div class="txt-odometer-counter" aria-label="12,480 downloads this week"> <span class="txt-odometer-counter-num" aria-hidden="true"><span class="txt-odometer-counter-col" style="--to: 1"><span>01</span></span><span class="txt-odometer-counter-col" style="--to: 12"><span>0123456789012</span></span><span>,</span><span class="txt-odometer-counter-col" style="--to: 24"><span>0123456789012345678901234</span></span><span class="txt-odometer-counter-col" style="--to: 38"><span>012345678901234567890123456789012345678</span></span><span class="txt-odometer-counter-col" style="--to: 40"><span>01234567890123456789012345678901234567890</span></span></span> <span class="txt-odometer-counter-label">downloads this week</span> </div>
CSS
.txt-odometer-counter {
--c: var(--txt-color, #3b82f6);
font-size: var(--txt-size, 32px);
font-family: system-ui, sans-serif;
font-weight: 700;
line-height: 1.2;
display: inline-flex;
flex-direction: column;
align-items: center;}
.txt-odometer-counter-num {
display: flex;
color: var(--c);
height: 1.2em;
overflow: hidden;
font-size: 1.6em;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
/* soft top and bottom edges, so digits roll in and out of view */
-webkit-mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent);
mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent);
}
.txt-odometer-counter-col > span {
display: block;
/* one digit per line: the strip is exactly one digit wide */
width: 1ch;
word-break: break-all;
animation: txt-odometer-counter-roll 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.txt-odometer-counter-label {
font-size: 0.5em;
font-weight: 600;
opacity: 0.7;
}
@keyframes txt-odometer-counter-roll {
to { transform: translateY(calc(var(--to) * -1.2em)); }
}
@media (prefers-reduced-motion: reduce) {
.txt-odometer-counter, .txt-odometer-counter *, .txt-odometer-counter::before, .txt-odometer-counter::after, .txt-odometer-counter *::before, .txt-odometer-counter *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--txt-coloron the element or a parent. Currently previewing#3b82f6. - Font size: set
--txt-size. Every other dimension is inem, so the whole thing scales together. Currently previewing40px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.