Pure CSS Counting Number Animation

Three headline statistics count up from zero when the page loads, each with its own duration, and settle on the real figures.

CSS can animate a custom property once @property has declared its type, and the property is set to inherit so the child that prints it sees the animated value. Each figure stores its target in a custom property, the animation runs a registered integer from zero to that target, and counter-reset reads the integer so counter() can print it through a pseudo-element. Because the property is an integer the number ticks through whole values. The percent and plus suffixes come from a second pseudo-element, and the integer prints without a thousands separator because counter styles cannot insert one.

@property is Baseline since 2024. An older browser that cannot register the property shows the final figure straight away, which is the right fallback for a number.