Zeitbasierte CSS-Animations-Technik

Zeitbasierter Ansatz für CSS-Animationen

• Mit der Unterstützung mathematischer Funktionen in CSS lässt sich der zeitbasierte Ansatz für CSS-Animationen wieder einsetzen
  • mod(), round(), trigonometrische Funktionen und weitere werden unterstützt
  • Für Demos muss ggf. ein experimenteller Feature-Flag aktiviert werden

Grundidee

• Mit der CSS Houdini API kann eine benutzerdefinierte Variable definiert werden, die die Zeit (in Millisekunden) verfolgt
  • Definiere die Variable --t mit der @property-Regel und setze den Initialwert auf 0
  • Erhöhe --t mit der @keyframes-Regel linear über 24 Stunden (86,400,000ms)
  • Auf --t basierende andere Werte ändern sich mit und erzeugen den Animationseffekt
  • Mit der Funktion counter() kann der Wert der Variable --t angezeigt werden

Framerate-Steuerung

• Ein Update-Takt von 60 Frames per Sekunde (FPS) reicht für eine flüssige Animation aus
• Bei Bedarf kann die Bildrate mit der step()-Funktion manuell gesteuert werden
  • Berechne den gewünschten FPS-Wert mit der step()-Funktion in der Eigenschaft animation-timing-function

Zeitumrechnung

• Da --t kontinuierlich nur in eine Richtung ansteigt, ist es für einige CSS-Eigenschaften möglicherweise ungeeignet
• Mit min() kann die Animation gestoppt werden, sobald ein bestimmter Wert erreicht ist
• Mit mod() kann die Animation neu gestartet werden
• Mit sin() kann ein Vorwärts-rückwärts Bewegungseffekt erzeugt werden

Benutzerdefinierte Easing-Funktionen

• Mit mathematischen Funktionen und der Variable --t lassen sich benutzerdefinierte Easing-Funktionen erstellen
• Effekte, die mit cubic-bezier() schwer zu erreichen sind, sind möglich
• Beispiele: ease-out-cubic, ease-out-elastic usw.

CSS Doodle-Experiment

• Bei komplexen Ausdrücken können var() und calc() die Code-Lesbarkeit verringern
• In css-doodle kann --t mit der Funktion @t dargestellt werden
• Neuere Versionen von css-doodle erlauben direkt die Verwendung einfacher mathematischer Ausdrücke in Funktionsargumenten
• Zusätzlich werden auch die Funktionen @T und @TS bereitgestellt
  • @T repräsentiert die Zeit seit Tagesbeginn
  • @TS ist die Kurzschreibweise für @t(/1000) und verfolgt die Zeit in Sekunden
• Uhren- und Sprungbewegungsbeispiele können mit css-doodle umgesetzt werden

Fazit

• Dieser Ansatz mit der Verwendung von Zeit als Variable ist spannend
• Keyframes können intuitiver sein, aber bei Demos mit vielen mathematischen Berechnungen und Input-Variablen führt die Nutzung von Zeit als Variable zu vielfältigeren Ergebnissen

GN⁺-Kommentar

• Die zeitbasierte CSS-Animationsmethode erweitert nicht nur die Bandbreite der Animationen, die rein mit CSS umgesetzt werden können, sondern dürfte auch die Einsatzmöglichkeiten in Kombination mit anderen Technologien wie Shadern oder WebGL erhöhen
• Zusammen mit Werkzeugen wie CSS Houdini und CSS Doodle lassen sich noch flexiblere und vielfältigere Ausdrucksformen umsetzen
• Bei einer Anwendung im realen Projektkontext sind jedoch Punkte wie Browser-Kompatibilität und Performance zu berücksichtigen. Es wäre sinnvoll, die Vor- und Nachteile der klassischen Keyframe-Methode mit dieser zu vergleichen und selektiv einzusetzen
• Im Vergleich zu spezialisierten Animationsbibliotheken wie GSAP sollten ebenfalls die jeweiligen Vor- und Nachteile analysiert werden. Es wäre auch sinnvoll, komplementäre Einsatzszenarien zu prüfen
• Ich hoffe, dass künftig mehr Beispiele und Use Cases zeitbasierter CSS-Animationen veröffentlicht werden, sodass Frontend-Entwickler sie leichter umsetzen können

[GN⁺]

Hacker News Kommentare

• In CSS kann man einen negativen animation-delay-Wert nutzen, um den Animationsfortschritt per JavaScript zu steuern. Beispiel: Wenn man animation-delay: -1500ms setzt, startet die Animation sofort, springt aber direkt zum 1,5-Sekunden-Zeitpunkt. Durch das Manipulieren dieses Werts in JavaScript lässt sich CSS-Animation-Scrubbing realisieren und alle Animationen so mit einem Tick-Loop im Stil von Game-Engines (Berechnung, Update, Rendering) kompatibel machen.

• Sobald man über einfache easing-Funktionen oder Basis-Keyframes für nur ein, zwei Kanäle hinausgeht, stößt dieser Ansatz schnell an Grenzen. Mit der Theatre.js-Bibliothek ist ein Studio-UI mit einer Timeline praktisch nützlich, wenn man eigene Animationen braucht: Es gibt eine Runtime, die Keyframes sowie Bezier-Kurven importiert und die Werte im Verhältnis zur Timeline interpoliert.

• Der Beitrag nutzt dabei benutzerdefiniertes CSS @property, das laut Browser-Unterstützung 88 % erreicht. Man sollte beachten, dass Browser die Initialwerte unterschiedlich handhaben: Chrome verwendet den Initialwert bei undefinierten und ungültigen Werten, Firefox nur bei undefinierten. Für die meisten Projekte dürfte das kein Problem sein, aber um Browser-Implementierungsunterschiede zu beheben, muss man möglicherweise mit JavaScript Firefox-Standardwerte setzen.

• CSS unterstützt genügend Mathe-Funktionen wie mod(), round() und trigonometrische Funktionen. CSS kann keinen Timer wie JavaScript starten, aber heute kann man mit der CSS Houdini API benutzerdefinierte Variablen definieren, um Zeit in Millisekunden zu verfolgen. Wenn wir bereits JavaScript haben, warum brauchen wir dann all diese Dinge überhaupt? Sollte die Render-Schicht nicht nur an Zeichnungsprimitiven interessiert sein? Warum bauen wir schrittweise immer mehr Hoch-level-Ebenen ein?

• Die gebaute Uhr wirkt ausgesprochen elegant. Der Artikel ist gut geschrieben. Chrome hat noch keine CSS-Unterstützung für mod() ausgerollt, daher sind die meisten Demos auf der Seite ohne eine Vorschau-Version nicht animiert.

• Wenn man in allen Browsern flüssige CSS-Animationen möchte, ohne den Tick steuern zu müssen, ist die FLIP-Methode sinnvoll.

• Ich wollte etwas wie „Box Breathing“ bauen, bei dem Atemzug–Halten–Ausatmung–Halten komplett konfigurierbar ist, um es auf den eigenen Körper anzupassen und den gewünschten Effekt zu erzielen. Ohne einen Ansatz wie auf dieser Seite scheint das (ohne JS oder enorme Komplexität) kaum möglich zu sein. Es gibt wirklich kreative Demos auf dieser Seite.

• Interessanterweise funktioniert die Demo vor mod(); mit mod() und sin() tut es in der neuesten Android-Version von Chrome jedoch gar nichts.

• Die Animation am Seitenende ist sehr beeindruckend. Sie wirkt wie ein -Element, nicht wie .

• Sehr beeindruckend, aber irgendwie sind wir doch wieder an einem Punkt, den wir vor Jahrzehnten bereits mit Flash hätten erreichen können. Ich hoffe nicht darauf, dass Flash zurückkommt, würde mir aber wünschen, dass es benutzerfreundlichere Tools für das Erstellen von CSS-Animationen gibt.