Feature Request
Add a CSS-only animated number counter utility. This is one of the most-requested motion effects for landing pages and dashboards — "0 → 10,000 customers" style count-up animations.
Proposed approach using CSS @Property
@property --ease-count {
syntax: '<integer>';
initial-value: 0;
inherits: false;
}
.ease-counter {
--ease-count-target: 100;
--ease-count-duration: 2s;
counter-reset: ease-count var(--ease-count);
animation: ease-count-up var(--ease-count-duration) ease-out forwards;
}
.ease-counter::after {
content: counter(ease-count);
}
@keyframes ease-count-up {
from { --ease-count: 0; }
to { --ease-count: var(--ease-count-target); }
}Custom properties
--ease-count-target — end value (required, set inline)--ease-count-duration (default: 2s)--ease-count-delay (default: 0s)--ease-count-easing (default: ease-out)
Browser support note
CSS @property is supported in Chrome 85+, Edge 85+, Firefox 128+, Safari 16.4+. Add a fallback note for older browsers.
prefers-reduced-motion: Show the final value immediately, skip the animation.
File: animations/counter.css
Feature Request
Add a CSS-only animated number counter utility. This is one of the most-requested motion effects for landing pages and dashboards — "0 → 10,000 customers" style count-up animations.
Proposed approach using CSS @Property
Custom properties
--ease-count-target— end value (required, set inline)--ease-count-duration(default: 2s)--ease-count-delay(default: 0s)--ease-count-easing(default: ease-out)Browser support note
CSS
@propertyis supported in Chrome 85+, Edge 85+, Firefox 128+, Safari 16.4+. Add a fallback note for older browsers.prefers-reduced-motion: Show the final value immediately, skip the animation.
File:
animations/counter.css