CSS Digital Animation, por exemplo, imagine um número mudando de 1 para 2 e depois mudando de 2 para 3 e depois mudando de 3 para 4, etc., durando por um tempo especificado. É como um contador, mas controlado pela mesma animação que usamos para projetar animações na web. Isso pode ser útil ao projetar coisas como painéis e pode adicionar alguma vitalidade aos números. surpreendentemente, isso agora é possível no CSS sem muita habilidade. você pode pular direto para a nova solução, se quiser, mas primeiro vamos ver como nós costumamos fazê -lo.

Uma maneira bastante lógica para os números de animação é alterar os números através do JavaScript. Poderíamos fazer um SetInterval bastante simples, mas aqui está uma resposta mais avançada que usa uma função que aceita o valor inicial, o valor final e a duração, para que você possa tratá -lo mais como uma animação:

Se usarmos apenas CSS, podemos usar o contador CSS para animar os números ajustando as contagens em diferentes quadros -chave:

Outra maneira é alinhar todos os números em uma linha e animar suas posições, mostrando apenas um número por vez:

Alguns do código duplicado nesses exemplos podem usar pré -processadores como Pug (para HTML) ou SCSS (para CSS) que fornecem loops para facilitar o gerenciamento, mas deliberadamente usam código nativo para fins para que você possa ver a ideia básica.

nova solução CSS

Com o suporte mais recente para css.registerproperty e @property, podemos

Animate CSS Variables . O truque é declarar propriedades personalizadas do CSS como números inteiros; Isso permite que você os interpolo como qualquer outro número inteiro (por exemplo, em uma conversão).

@Property -Num { Sintaxe: '

@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: No momento da redação, esta sintaxe @Property é suportada apenas pelo Chrome (assim como outros navegadores do kernel de cromo, como Edge e Opera), portanto não é compatível com navegador cruzado. Se você estiver criando um aplicativo apenas cromado (como o aplicativo Electron), poderá usá-lo imediatamente, caso contrário, espere. A demonstração acima mencionada tem um suporte mais amplo. A propriedade de conteúdo

CSS pode ser usada para exibir números, mas ainda precisamos usar o contador para converter números em strings, porque o conteúdo pode produzir apenas

valores. veja se podemos

facilitar a animação como qualquer outra animação? Super legal!

variáveis ​​css típicas também podem ser usadas em @keyframes:

uma desvantagem? Os contadores suportam apenas números inteiros. Isso significa que decimais e frações não são consideradas. Temos que exibir a parte inteira e a parte decimal separadamente de alguma forma.

podemos animar decimais?

você pode converter decimais (como -número) em números inteiros. Veja como funciona:

Registre a

1. variável css (por exemplo --nteger) e especifique-se inicial-value. então use calc () para rodar: --integer: calc (var (-número))
2. Neste caso, - -Number vai arredondar o número inteiro mais próximo e armazenar o resultado em --nteger.

@propriedade --nteger { Sintaxe: "

"; Valor inicial: 0; herda: false; } -Número: 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 --nteger */ -Número: 1234.5678; --Integer: max (var (-número)-0,5, 0); / * 1234 */

Podemos extrair a parte fracionária de maneira semelhante e depois convertê -la em uma string usando um contador (mas lembre -se de que o valor do conteúdo deve ser uma string). Para exibir a string conectada, use a seguinte sintaxe:

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

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

Este é um exemplo completo de animação de uma porcentagem fracionária:

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

Outras dicas

porque estamos usando contadores CSS, o formato desses contadores pode estar em outros formatos além dos números. Aqui está um exemplo de animar a letra "CSS" em "Sim"!

Oh, há outro truque: podemos usar o JavaScript para obter o valor calculado das propriedades personalizadas para depurar o valor:

getComputedStyle (elemento) .getPropertyValue ('-variável')

É isso! Os recursos do CSS de hoje são incríveis.