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 for 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 jump straight to the new solution if you like, but first let's see how we used to do it.

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 (for example in a conversion).

@property --num { syntax: '

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

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

Important Note: At the time of writing, this @property syntax is only supported by Chrome (as well as 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 the content can only output

values. See if we can

easing the animation like any other animation? Super cool!

Typical CSS variables can also be used in @keyframes:

A drawback? 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's how it works:

Register a

1. CSS variable (for example --integer) and specify initial-value. Then use calc() to round: --integer: calc(var(--number))
2. In this case, --number will round to the nearest integer and store the result in --integer.

@property --integer { syntax: "

"; initial-value: 0; inherits: false; } --number: 1234.5678; --integer: calc(var(--number)); /* 1235 */

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

/* @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:

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

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

This is a complete example of animating a fractional percentage:

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

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, there is another trick: we can use JavaScript to get the calculated value of custom properties to debug the value:

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

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