Stats Counter Animation
Three stats count up one after another, and each suffix (+, %) pops in once its number lands. One keyframe serves all three: every stat passes its target in --to and its order in --i.
Also known as: stats counter css, animated statistics section, number counter with plus sign.
Projects
Countries
Happy clients
HTML
<div class="txt-stats-counter" aria-label="250+ projects, 48 countries, 99% happy clients"> <div class="txt-stats-counter-stat" style="--to: 250; --i: 0"><b data-unit="+"></b><span>Projects</span></div> <div class="txt-stats-counter-stat" style="--to: 48; --i: 1"><b data-unit=""></b><span>Countries</span></div> <div class="txt-stats-counter-stat" style="--to: 99; --i: 2"><b data-unit="%"></b><span>Happy clients</span></div> </div>
CSS
@property --txt-stats-counter-n {
syntax: "<integer>";
initial-value: 0;
inherits: false;
}
.txt-stats-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: flex;
align-items: flex-start;}
.txt-stats-counter-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2em;
padding: 0.1em 0.7em;
}
.txt-stats-counter-stat + .txt-stats-counter-stat {
border-left: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
}
.txt-stats-counter-stat b {
font-size: 1.45em;
line-height: 1;
color: var(--c);
font-variant-numeric: tabular-nums;
counter-reset: txt-stats-counter-v var(--txt-stats-counter-n);
animation: txt-stats-counter-count 1.6s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 0.25s) forwards;
}
.txt-stats-counter-stat b::before {
content: counter(txt-stats-counter-v);
}
.txt-stats-counter-stat b::after {
content: attr(data-unit);
display: inline-block;
opacity: 0;
animation: txt-stats-counter-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) calc(1.45s + var(--i) * 0.25s) forwards;
}
.txt-stats-counter-stat span {
font-size: 0.42em;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
opacity: 0.7;
}
@keyframes txt-stats-counter-count {
to { --txt-stats-counter-n: var(--to); }
}
@keyframes txt-stats-counter-pop {
from { opacity: 0; transform: scale(0.2) translateY(0.3em); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.txt-stats-counter, .txt-stats-counter *, .txt-stats-counter::before, .txt-stats-counter::after, .txt-stats-counter *::before, .txt-stats-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.