Catégories
Astuces et Design

Animation des compteurs de nombres | Astuces CSS

Animation numérique, comme dans, imaginez un nombre passant de 1 à 2, puis de 2 à 3, puis de 3 à 4, etc. pendant un temps spécifié. Comme un compteur, sauf contrôlé par le même type d'animation que nous utilisons pour d'autres animations de conception sur le Web. Cela pourrait être utile lors de la conception de quelque chose comme un tableau de bord, pour apporter un peu de piquant aux chiffres. Étonnamment, cela peut maintenant être fait en CSS sans trop de tromperie. Vous pouvez passer directement à la nouvelle solution si vous le souhaitez, mais voyons d'abord comment nous utilisé pour le faire.

Une façon assez logique de faire une animation numérique est de changer le nombre en JavaScript. On pourrait faire un assez simple setInterval, mais voici une réponse plus sophistiquée avec une fonction qui accepte un début, une fin et une durée, afin que vous puissiez la traiter plus comme une animation:

En conservant le CSS, nous pourrions utiliser des compteurs CSS pour animer un nombre en ajustant le nombre à différentes images clés:

Une autre façon serait d'aligner tous les nombres dans une ligne et d'animer la position de ceux-ci en ne les affichant qu'un à la fois:

Une partie du code répétitif de ces exemples pourrait utiliser un préprocesseur comme Pug pour HTML ou SCSS pour CSS qui offrent des boucles pour les rendre peut-être plus faciles à gérer, mais utilisez volontairement la vanille pour que vous puissiez voir les idées fondamentales.

La solution CSS New School

Avec un support récent pour CSS.registerProperty et @property, nous pouvons animer des variables CSS. L'astuce consiste à déclarer la propriété personnalisée CSS comme un entier; de cette façon, il peut être interpolé (comme dans une transition) comme n'importe quel autre entier.

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

Note importante: Au moment d'écrire ces lignes, ce @property La syntaxe n'est prise en charge que dans Chrome (et dans d'autres navigateurs principaux de Chromium tels que Edge et Opera), ce n'est donc pas compatible avec plusieurs navigateurs. Si vous créez quelque chose pour Chrome uniquement (par exemple, une application Electron), cela vous sera utile tout de suite, sinon, attendez. Les démos ci-dessus sont plus largement prises en charge.

Le CSS content propriété peut être utilisée pour afficher le numéro, mais nous devons toujours utiliser counter pour convertir le nombre en chaîne car content ne peut sortir que valeurs.

Voyez comment nous pouvons facilité les animations comme n'importe quelle autre animation? Super cool!

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

Un inconvénient? Les compteurs ne prennent en charge que les entiers. Cela signifie que les décimales et les fractions sont hors de question. Nous devrons afficher séparément la partie entière et la partie fractionnaire.

Pouvons-nous animer des décimales?

Il est possible de convertir une décimale (par exemple --number) en un entier. Voici comment cela fonctionne:

  1. Enregistrer un Variable CSS (par exemple --integer ), avec le initial-value spécifié
  2. Ensuite, utilisez calc() pour arrondir la valeur: --integer: calc(var(--number))

Dans ce cas, --number sera arrondi à l'entier le plus proche et stockera le résultat dans --integer.

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

Parfois, nous avons juste besoin de la partie entière. Il y a une manière délicate de le faire: --integer: max(var(--number) - 0.5, 0). Cela fonctionne pour les nombres positifs. calc() n'est même pas nécessaire de cette façon.

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

Nous pouvons extraire la partie fractionnaire de la même manière, puis la convertir en chaîne avec compteur (mais rappelez-vous que content les valeurs doivent être des chaînes). Pour afficher des chaînes concaténées, utilisez la syntaxe suivante:

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

Voici un exemple complet qui anime les pourcentages avec des décimales:

Autres conseils

Comme nous utilisons des compteurs CSS, le format de ces compteurs peut être dans d'autres formats que les nombres. Voici un exemple d’animation des lettres «CSS» en «OUI»!

Oh et voici un autre conseil: nous pouvons déboguer les valeurs en saisissant la valeur calculée de la propriété personnalisée avec JavaScript:

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

C'est tout! C’est incroyable ce que le CSS peut faire de nos jours.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *