Animating Number Counters
10 months ago
- #Web Development
- #Frontend
- #CSS Animation
- Number animation in CSS can now be done without much trickery, using CSS.registerProperty and @property.
- Previous methods included JavaScript setInterval, CSS counters with keyframes, and animating number positions.
- The new CSS solution allows animating CSS variables declared as integers, useful for transitions and keyframes.
- CSS counters only support integers, making decimals and fractions challenging to animate directly.
- Accessibility considerations include keyboard navigation and screen reader compatibility issues.
- Animation-fill-mode: forwards can be used to stop animations at their final value.
- Large numbers (over 8 digits) may cause issues, with fixes expected in Chrome 93.
- IntersectionObserver can be used to tie number animation to scroll position.