Animated Number Counter

Numbers that count up using @property, CSS counters, and animations.

Published May 19, 2026

Demo

Examples

Pure CSS

Rating

HTML
				
				<div class="counter-value" style="--target: 42"></div>
<div class="counter-label">Label</div>

CSS
				
				@property --target {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

.counter-value {
  counter-reset: num var(--target);
  animation: count-up 2s ease-out forwards;
}

.counter-value::after {
  content: counter(num);
}

@keyframes count-up {
  from { --target: 0; }
}

			

How it works

@property registers a custom property with a specific type — here an integer. CSS can then animate it like a number (not just interpolate between two string values). counter-reset uses the custom property value, and ::after displays it via content:counter(). The whole animation is a CSS keyframe from 0 to the --target value.