Animating Number Counters

CSS digital animation, for example, imagine a number changing from 1 to 2, then changing from 2 to 3, then changing from 3 to 4, etc., lasting a specified time. It's like a counter, but controlled by the same animation we use to design animations on the web. This can be useful when designing things like dashboards and can add some vitality to the numbers. Surprisingly, this is now possible in CSS without much skill. You can just jump straight to the new solution if you like, but first let's see how we did it in the past .

A rather logical way to animation numbers is to change numbers through JavaScript. We could do a fairly simple setInterval, but here is a more advanced answer that uses a function that accepts the start value, the end value, and the duration, so you can treat it more like an animation:

If we only use CSS, we can use the CSS counter to animate the numbers by adjusting the counts in different keyframes:

Another way is to line all the numbers in a row and animate their positions, showing only one number at a time:

Some of the duplicate code in these examples can use preprocessors like Pug (for HTML) or SCSS (for CSS) that provide loops to make them easier to manage, but deliberately use native code for purposes so that you can see the basic idea.

New CSS Solution

With the latest support for CSS.registerProperty and @property, we can animate CSS variables . The trick is to declare CSS custom properties as integers; this allows you to interpolate them like any other integer (e.g. in a conversion).

 @property --num {
  syntax: '<integer> ';
  initial-value: 0;
  inherits: false;
}

div {
  transition: --num 1s;
  counter-reset: num var(--num);
}
div:hover {
  --num: 10000;
}
div::after {
  content: counter(num);
}</integer>

Important Note: At the time of writing, this @property syntax is supported only by Chrome (and other Chromium kernel browsers such as Edge and Opera), so it is not cross-browser compatible. If you are building a Chrome-only app (such as the Electron app), you can use it right away, otherwise wait. The above mentioned demo has wider support.

The CSS content property can be used to display numbers, but we still need to use counter to convert numbers to strings, because content can only output<string></string> value.

See if we can ease the animation like any other animation? Super cool!

Typed CSS variables can also be used in @keyframes:

A disadvantage? Counters only support integers. This means that decimals and fractions are not considered. We have to display the integer part and the decimal part separately in some way.

Can we animate decimals?

You can convert decimals (such as --number) into integers. Here is how it works:

1. Register one<integer></integer> CSS variable (for example --integer) and specify initial-value.
2. Then use calc() to round: --integer: calc(var(--number))

In this case, --number will round to the nearest integer and store the result in --integer.

 @property --integer {
  syntax: "<integer> ";
  initial-value: 0;
  inherits: false;
}
--number: 1234.5678;
--integer: calc(var(--number)); /* 1235 */</integer>

Sometimes we only need integer parts. There is a clever way to do this: --integer: max(var(--number) - 0.5, 0). This applies to positive numbers. This method doesn't even require calc().

 /* @property --integer */
--number: 1234.5678;
--integer: max(var(--number) - 0.5, 0); /* 1234 */

We can extract the fractional part in a similar way and then convert it to a string using a counter (but remember that the content value must be a string). To display the connected string, use the following syntax:

 content: "string1" var(--string2) counter(--integer) ...

Here is a complete example of animating with decimal percentages:

Other tips

Because we are using CSS counters, the format of these counters can be in other formats than numbers. Here is an example of animating the letter "CSS" into "YES"!

Oh, and another trick: we can debug the value of the custom attribute through JavaScript:

 getComputedStyle(element).getPropertyValue('--variable')

That's it! Today's CSS features are amazing.

The above is the detailed content of Animating Number Counters. For more information, please follow other related articles on the PHP Chinese website!