L'animation numérique CSS, par exemple, imaginez un nombre passant de 1 à 2, puis passant de 2 à 3, puis passant de 3 à 4, etc., durant une période spécifiée. C'est comme un compteur, mais contrôlé par la même animation que nous utilisons pour concevoir des animations sur le Web. Cela peut être utile lors de la conception de choses comme des tableaux de bord et peut ajouter une certaine vitalité aux nombres. Étonnamment, cela est maintenant possible dans CSS sans trop de compétence. Vous pouvez sauter directement à la nouvelle solution si vous le souhaitez, mais voyons d'abord comment nous le faisons.

Une façon plutôt logique de numéros d'animation est de modifier les nombres via JavaScript. Nous pourrions faire un setInterval assez simple, mais voici une réponse plus avancée qui utilise une fonction qui accepte la valeur de démarrage, la valeur finale et la durée, afin que vous puissiez le traiter plus comme une animation:

Si nous utilisons uniquement CSS, nous pouvons utiliser le compteur CSS pour animer les nombres en ajustant les comptes dans différents images clés:

Une autre façon consiste à tapisser tous les nombres en ligne et à animer leurs positions, affichant un seul numéro à la fois:

Une partie du code en double de ces exemples peut utiliser des préprocesseurs comme PUG (pour HTML) ou SCSS (pour CSS) qui fournissent des boucles pour les rendre plus faciles à gérer, mais utilisent délibérément le code natif à des fins afin que vous puissiez voir l'idée de base.

nouvelle solution CSS

Avec la dernière prise en charge de css.registerproperty et @property, nous pouvons

animer les variables CSS . L'astuce consiste à déclarer les propriétés personnalisées CSS en tant qu'entiers; Cela vous permet de les interpoler comme tout autre entier (par exemple dans une conversion).

@ propriété --num { syntaxe: '

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

Remarque importante: Au moment de la rédaction, cette syntaxe @property n'est prise en charge que par Chrome (ainsi que d'autres navigateurs de noyau chrome tels que Edge et Opera), donc il n'est pas compatible avec le croisement. Si vous créez une application chromée uniquement (comme l'application Electron), vous pouvez l'utiliser immédiatement, sinon attendez. La démo mentionnée ci-dessus a un soutien plus large. La propriété de contenu

CSS peut être utilisée pour afficher des nombres, mais nous devons toujours utiliser des comptoirs pour convertir les nombres en chaînes, car le contenu ne peut sortir que des valeurs

. Voyez si nous pouvons

assouplir l'animation comme une autre animation? Super cool!

Les variables CSS typiques peuvent également être utilisées dans @keyframes:

un inconvénient? Les compteurs ne soutiennent que les entiers. Cela signifie que les décimales et les fractions ne sont pas prises en compte. Nous devons afficher la partie entière et la partie décimale séparément d'une manière ou d'une autre.

pouvons-nous animer des décimales?

Vous pouvez convertir des décimales (telles que --number) en entiers. Voici comment cela fonctionne:

enregistrez une variable

1. css (par exemple --Integer) et spécifiez la valeur initiale. Utilisez ensuite calc () pour ronde: --Integer: calc (var (- numéro))
2. Dans ce cas, --number se terminera vers l'entier le plus proche et stockera le résultat dans --Integer.

@ Property --Integer { syntaxe: "

"; valeur initiale: 0; hérite: faux; } - Number: 1234.5678; --Integer: calc (var (- nombre)); / * 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 (- nombre) - 0,5, 0); / * 1234 * /

Nous pouvons extraire la partie fractionnaire d'une manière similaire, puis la convertir en une chaîne en utilisant un compteur (mais n'oubliez pas que la valeur de contenu doit être une chaîne). Pour afficher la chaîne connectée, utilisez la syntaxe suivante:

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

contenu: "string1" var (- string2) compteur (- entier) ...

Ceci est un exemple complet d'animation d'un pourcentage fractionnaire:

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

Autres conseils

Parce que nous utilisons les compteurs CSS, le format de ces compteurs peut être dans d'autres formats que les nombres. Voici un exemple d'animation de la lettre "CSS" dans "Oui"!

Oh, il y a une autre astuce: nous pouvons utiliser JavaScript pour obtenir la valeur calculée des propriétés personnalisées pour déboguer la valeur:

getCompuledStyle (élément) .getPropertyValue ('- variable')

C'est ça! Les fonctionnalités CSS d'aujourd'hui sont incroyables.