CSS Digital Animation, por ejemplo, imagina un número que cambia de 1 a 2, luego cambia de 2 a 3, luego cambia de 3 a 4, etc., que dura un tiempo específico. Es como un mostrador, pero controlado por la misma animación que usamos para diseñar animaciones en la web. Esto puede ser útil al diseñar cosas como paneles y puede agregar algo de vitalidad a los números. Sorprendentemente, esto ahora es posible en CSS sin mucha habilidad. Puede saltar directamente a la nueva solución si lo desea, pero primero veamos cómo solemos hacerlo.

Una forma bastante lógica de los números de animación es cambiar los números a través de JavaScript. Podríamos hacer un setinterval bastante simple, pero aquí hay una respuesta más avanzada que utiliza una función que acepta el valor de inicio, el valor final y la duración, por lo que puede tratarla más como una animación:

Si solo usamos CSS, podemos usar el contador CSS para animar los números ajustando los recuentos en diferentes fotogramas de clave:

Otra forma es alinear todos los números en una fila y animar sus posiciones, mostrando solo un número a la vez:

parte del código duplicado en estos ejemplos puede usar preprocesadores como PUG (para HTML) o SCSS (para CSS) que proporcionan bucles para que sean más fáciles de administrar, pero usan deliberadamente código nativo para fines para que pueda ver la idea básica.

nueva solución CSS

Con el último soporte para css.registerproperty y @property, podemos

animar variables CSS . El truco es declarar propiedades personalizadas de CSS como enteros; Esto le permite interpolarlos como cualquier otro entero (por ejemplo en una conversión).

@Propiedad -Num { sintaxis: '

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

Nota importante: Al momento de escribir, esta sintaxis @Property solo es compatible con Chrome (así como otros navegadores de núcleos de cromo como Edge y Opera), por lo que no es compatible con el navegador cruzado. Si está creando una aplicación solo cromada (como la aplicación Electron), puede usarla de inmediato, de lo contrario esperar. La demostración mencionada anteriormente tiene un soporte más amplio. La propiedad de contenido CSS

se puede usar para mostrar números, pero aún necesitamos usar el contador para convertir los números en cadenas, porque el contenido solo puede emitir

valores. vea si podemos

aliviar la animación como cualquier otra animación? ¡Súper genial!

Las variables CSS típicas también se pueden usar en @Keyframes:

¿Un inconveniente? Los contadores solo admiten enteros. Esto significa que no se consideran decimales y fracciones. Tenemos que mostrar la parte entera y la parte decimal por separado de alguna manera.

¿podemos animar decimales?

puede convertir decimales (como -number) en enteros. Así es como funciona:

registrar un

1. css variable (por ejemplo --integer) y especificar el valor inicial. luego use calc () para redondear: --integer: calc (var (-número))
2. En este caso, -Number redondará al entero más cercano y almacenará el resultado en --integer.

@Property --integer { sintaxis: "

"; valor inicial: 0; Hereda: falso; } -Number: 1234.5678; --integer: calc (var (-número)); / * 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 (-número)-0.5, 0); / * 1234 */

podemos extraer la parte fraccional de manera similar y luego convertirla a una cadena usando un contador (pero recuerde que el valor de contenido debe ser una cadena). Para mostrar la cadena conectada, use la siguiente sintaxis:

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

content: "string1" var (-string2) contador (-entero) ...

Este es un ejemplo completo de animar un porcentaje fraccional:

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

otros consejos

Debido a que estamos usando contadores CSS, el formato de estos contadores puede estar en otros formatos que números. ¡Aquí hay un ejemplo de animar la letra "CSS" en "Sí"!

Oh, hay otro truco: podemos usar JavaScript para obtener el valor calculado de las propiedades personalizadas para depurar el valor:

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

¡Eso es todo! Las características de CSS de hoy son increíbles.