Animierte Zahlenköpfe

Nummern-Animation, also stell dir vor, eine Zahl ändert sich von 1 zu 2, dann von 2 zu 3, dann von 3 zu 4 usw. über eine bestimmte Zeit. Wie ein Zähler, nur gesteuert durch die gleiche Art von Animation, die wir für andere Design-Animationen im Web verwenden. Das könnte nützlich sein, wenn man etwas wie ein Dashboard gestaltet, um den Zahlen etwas Pep zu verleihen. Erstaunlicherweise lässt sich dies jetzt mit CSS ohne viel Trickserei bewerkstelligen. Du kannst direkt zur neuen Lösung springen, wenn du möchtest, aber lass uns zuerst betrachten, wie wir es *früher* gemacht haben.

Eine ziemlich logische Methode für Nummern-Animationen ist die Änderung der Zahl in JavaScript. Wir könnten ein recht einfaches setInterval verwenden, aber hier ist eine schickere Antwort mit einer Funktion, die einen Start-, End- und Dauerwert akzeptiert, sodass du sie mehr wie eine Animation behandeln kannst.

Wenn wir bei CSS bleiben, könnten wir CSS-Zähler verwenden, um eine Zahl zu animieren, indem wir die Zählung bei verschiedenen Keyframes anpassen.

Eine andere Möglichkeit wäre, alle Zahlen hintereinander aufzureihen und nur jeweils eine durch Animation der Position anzuzeigen.

Ein Teil des sich wiederholenden Codes in diesen Beispielen könnte von einem Präprozessor wie Pug für HTML oder SCSS für CSS profitieren, die Schleifen anbieten, um sie vielleicht einfacher zu verwalten. Wir verwenden jedoch bewusst Vanilla, damit du die grundlegenden Ideen sehen kannst.

Die CSS-Lösung der neuen Schule

Mit der jüngsten Unterstützung für CSS.registerProperty und @property können wir CSS-Variablen animieren. Der Trick besteht darin, die benutzerdefinierte CSS-Eigenschaft als Integer zu deklarieren; auf diese Weise kann sie (wie jede andere ganze Zahl) interpoliert werden (z. B. innerhalb eines Übergangs).

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

Wichtiger Hinweis: Zum Zeitpunkt des Schreibens wird diese @property-Syntax nur in Chrome (und anderen Chromium-basierten Browsern wie Edge und Opera) unterstützt, daher ist sie nicht browserübergreifend kompatibel. Wenn du etwas nur für Chrome entwickelst (z. B. eine Electron-App), ist sie sofort nützlich, andernfalls warte. Die obigen Demos werden breiter unterstützt.

Die CSS-Eigenschaft content kann verwendet werden, um die Zahl anzuzeigen, aber wir müssen immer noch counter verwenden, um die Zahl in einen String umzuwandeln, da content nur <string>-Werte ausgeben kann.

Siehst du, wie wir die Animationen *gleiten* lassen können, genau wie jede andere Animation? Super cool! 

Typisierte CSS-Variablen können auch in @keyframes verwendet werden: 

Ein Nachteil? Zähler unterstützen nur ganze Zahlen. Das bedeutet, Dezimalzahlen und Brüche sind ausgeschlossen. Wir müssten den ganzzahligen und den Bruchteil separat irgendwie anzeigen.

Können wir Dezimalzahlen animieren?

Es ist möglich, eine Dezimalzahl (z. B. --number) in eine ganze Zahl umzuwandeln. Hier ist, wie es funktioniert

1. Registriere eine CSS-Variable vom Typ <integer> (z. B. --integer) mit dem angegebenen initial-value.
2. Verwende dann calc(), um den Wert zu runden: --integer: calc(var(--number)).

In diesem Fall wird --number auf die nächste ganze Zahl gerundet und das Ergebnis in --integer gespeichert.

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

Manchmal brauchen wir nur den ganzzahligen Teil. Es gibt eine trickreiche Methode dafür: --integer: max(var(--number) - 0.5, 0). Das funktioniert für positive Zahlen. calc() ist auf diese Weise nicht einmal erforderlich.

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

Den Bruchteil können wir auf ähnliche Weise extrahieren und dann mit einem Zähler in einen String umwandeln (aber denke daran, dass content-Werte Strings sein müssen). Um verkettete Strings anzuzeigen, verwende folgende Syntax:

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

Hier ist ein vollständiges Beispiel, das Prozentsätze mit Dezimalzahlen animiert.

Weitere Tipps

Da wir CSS-Zähler verwenden, kann das Format dieser Zähler auch andere Formate als Zahlen haben. Hier ist ein Beispiel, wie man die Buchstaben "CSS" zu "YES" animiert!

Oh, und hier noch ein Tipp: Wir können die Werte mit JavaScript debuggen, indem wir den berechneten Wert der benutzerdefinierten Eigenschaft abrufen.

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

Das ist alles! Es ist erstaunlich, was CSS heutzutage leisten kann.