CSS Digitale Animation, stellen Sie sich beispielsweise eine Nummer vor, die sich von 1 auf 2 wechselt, dann von 2 auf 3 wechselt und dann von 3 auf 4 usw. wechselt und für eine bestimmte Zeit dauert. Es ist wie ein Zähler, wird aber von derselben Animation gesteuert, mit der wir Animationen im Web entwerfen. Dies kann bei der Gestaltung von Dingen wie Dashboards nützlich sein und den Zahlen eine gewisse Vitalität verleihen. Überraschenderweise ist dies jetzt in CSS ohne viel Fähigkeit möglich. Sie können direkt zur neuen Lösung springen, wenn Sie möchten, aber zuerst sehen wir sehen, wie wir es früher gemacht haben. Eine ziemlich logische Möglichkeit zu Animationsnummern besteht darin, Zahlen durch JavaScript zu ändern. Wir könnten ein ziemlich einfaches SetInterval machen, aber hier ist eine erweiterte Antwort, die eine Funktion verwendet, die den Startwert, den Endwert und die Dauer akzeptiert, sodass Sie sie eher wie eine Animation behandeln können:

Wenn wir nur CSS verwenden, können wir den CSS -Gegenstand verwenden, um die Zahlen zu animieren, indem wir die Zählungen in verschiedenen Keyframes anpassen:

Eine andere Möglichkeit besteht darin, alle Zahlen in einer Reihe zu leiten und ihre Positionen zu animieren, wobei nur eine Nummer jeweils angezeigt wird:

Einige der doppelten Code in diesen Beispielen können Präprozessoren wie PUG (für HTML) oder SCSS (für CSS) verwenden, die Schleifen bereitstellen, um sie einfacher zu verwalten, aber den nativen Code für Zwecke absichtlich verwenden, damit Sie die Grundidee sehen können.

Neue CSS -Lösung

Mit der neuesten Unterstützung für CSS.registerProperty und @Property können wir

CSS -Variablen

animieren. Der Trick besteht darin, CSS -benutzerdefinierte Eigenschaften als Ganzzahlen zu deklarieren. Auf diese Weise können Sie sie wie jede andere Ganzzahl interpolieren (z. B. in einer Konvertierung). @property -num { Syntax: '

'; Anfangswert: 0; Erben: Falsch; } div { Übergang: -num 1s; Gegenauflistung: num var (-num); } Div: Hover { -Num: 10000; } div :: nach { Inhalt: Zähler (num); }

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

Wichtiger Hinweis:

Zum Zeitpunkt des Schreibens wird diese @Property-Syntax nur von Chrome (sowie anderen Chrom-Kern-Browsern wie Edge und Opera) unterstützt, sodass es nicht Kreuzbrowser kompatibel ist. Wenn Sie eine Nur-Chrome-App (z. B. die Elektronen-App) erstellen, können Sie sie sofort verwenden, da sonst warten. Die oben erwähnte Demo hat eine breitere Unterstützung. Die CSS -Inhaltseigenschaft kann verwendet werden, um Nummern anzuzeigen, aber wir müssen immer noch Zähler verwenden, um Zahlen in Zeichenfolgen umzuwandeln, da der Inhalt nur

Werte ausgeben kann. Sehen Sie, ob wir die Animation wie jede andere Animation lockern können? Super cool!

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

Ein Nachteil? Die Zähler unterstützen nur Ganzzahlen. Dies bedeutet, dass Dezimalstellen und Brüche nicht berücksichtigt werden. Wir müssen den ganzzahligen Teil und den Dezimalteil auf irgendeine Weise separat anzeigen.

Können wir Dezimalstellen animieren?

Sie können Dezimalstellen (wie -number) in Ganzzahlen umwandeln. So funktioniert es:

registrieren Sie eine

css variable (z. B.-Integer) und geben Sie den Initialenwert an.

1. Dann verwenden Sie Calc (), um zu runden:-Integer: Calc (var (-Nummer)) In diesem Fall wird -Nummer zum nächsten Ganzzahl runden und das Ergebnis speichern.
2. @property -integer { Syntax: "
"; Anfangswert: 0; Erben: Falsch; } -Nummer: 1234,5678; -Integer: Calc (var (-Nummer)); / * 1235 */

Manchmal brauchen wir nur ganzzahlige Teile. Es gibt eine clevere Möglichkeit, dies zu tun:-Integer: max (var (-Nummer)-0,5, 0). Dies gilt für positive Zahlen. Diese Methode erfordert nicht einmal Calc ().

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

Wir können den fraktionalen Teil ähnlich extrahieren und es dann mit einem Zähler in eine Zeichenfolge konvertieren (denken Sie jedoch daran, dass der Inhaltswert eine Zeichenfolge sein muss). Verwenden Sie die folgende Syntax, um die angeschlossene Zeichenfolge anzuzeigen:

Inhalt: "String1" var (-string2) counter (-Integer) ...

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

Dies ist ein vollständiges Beispiel für die Animation eines büschigen Prozentsatzes:

Andere Tipps

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

Da wir CSS -Zähler verwenden, kann das Format dieser Zähler in anderen Formaten als Zahlen sein. Hier ist ein Beispiel, um den Buchstaben "CSS" in "Ja" zu animieren!

Oh, es gibt einen weiteren Trick: Wir können JavaScript verwenden, um den berechneten Wert benutzerdefinierter Eigenschaften zu erhalten, um den Wert zu debuggen:

GetComputedStyle (Element) .getPropertyValue ('-Variable')

Das war es! Die heutigen CSS -Funktionen sind erstaunlich.