Animar contadores de números

Animación numérica, como en, imagina un número cambiando de 1 a 2, luego de 2 a 3, luego de 3 a 4, etc. durante un tiempo específico. Como un contador, excepto que está controlado por el mismo tipo de animación que usamos para otras animaciones de diseño en la web. Esto podría resultar útil al diseñar algo como un tablero, para darle un poco de dinamismo a los números. Sorprendentemente, esto ahora se puede hacer en CSS sin muchos trucos. Puede pasar directamente a la nueva solución si lo desea, pero primero veamos cómo solíamos hacerlo .

Una forma bastante lógica de hacer animación numérica es cambiando el número en JavaScript. Podríamos hacer una respuesta bastante simple setInterval, pero aquí hay una respuesta más elegante con una función que acepta un inicio, un final y una duración, para que puedas tratarla más como una animación:

Manteniéndolo en CSS, podríamos usar contadores CSS para animar un número ajustando el recuento en diferentes fotogramas clave:

Otra forma sería alinear todos los números en una fila y animar su posición mostrando solo uno a la vez:

Parte del código repetitivo en estos ejemplos podría usar un preprocesador como Pug para HTML o SCSS para CSS que ofrece bucles para hacerlos tal vez más fáciles de administrar, pero usa vainilla a propósito para que puedas ver las ideas fundamentales.

La solución CSS de la nueva escuela

Con soporte reciente para CSS.registerPropertyy @property, podemos animar variables CSS . El truco consiste en declarar la propiedad personalizada de CSS como un número entero; de esa manera se puede interpolar (como dentro de una transición) como cualquier otro número entero.

@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);}

Nota importante: en el momento de escribir este artículo, esta @propertysintaxis solo es compatible con Chrome (y otros navegadores principales de Chromium como Edge y Opera), por lo que no es compatible con todos los navegadores. Si está creando algo solo para Chrome (por ejemplo, una aplicación Electron), es útil de inmediato; si no, espere. Las demostraciones de arriba cuentan con un apoyo más amplio.

La contentpropiedad CSS se puede usar para mostrar el número, pero aún necesitamos usarla counterpara convertir el número en una cadena porque contentsolo podemos generar stringvalores.

¿Ves cómo podemos facilitar las animaciones como cualquier otra animación? ¡Super guay!

Las variables CSS escritas también se pueden utilizar en @keyframes:

¿Un inconveniente? Los contadores sólo admiten números enteros. Eso significa que los decimales y las fracciones están fuera de discusión. Tendríamos que mostrar la parte entera y la parte fraccionaria por separado de alguna manera.

¿Podemos animar decimales?

Es posible convertir un decimal (p. ej. --number) en un número entero. Así es como funciona:

1. Registre una integervariable CSS (por ejemplo --integer), con el initial-valuevalor especificado
2. Luego use calc()para redondear el valor:--integer: calc(var(--number))

En este caso, --numberse redondeará al número entero más cercano y se almacenará el resultado en --integer.

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

A veces solo necesitamos la parte entera . Hay una manera complicada de hacerlo: --integer: max(var(--number) - 0.5, 0). Esto funciona para números positivos. calc()Ni siquiera es necesario de esta manera.

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

Podemos extraer la parte fraccionaria de forma similar y luego convertirla en una cadena con un contador (pero recuerda que los contentvalores deben ser cadenas). Para mostrar cadenas concatenadas, utilice la siguiente sintaxis:

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

Aquí hay un ejemplo completo que anima porcentajes con decimales:

Otros consejos

Debido a que usamos contadores CSS, el formato de esos contadores puede ser en otros formatos además de los números . ¡Aquí hay un ejemplo de cómo animar las letras “CSS” a “SÍ”!

Ah, y aquí hay otro consejo: podemos depurar los valores tomando el valor calculado de la propiedad personalizada con JavaScript:

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

¡Eso es todo! Es sorprendente lo que CSS puede hacer hoy en día.