Pure CSS-Animationen

Für die Erstellung einer CSS-Animation ist Folgendes erforderlich:

• ein HTML-Element, das animiert werden soll
• eine CSS-Regel, die die Animation an dieses Element bindet
• eine Gruppe von Keyframes, die die Stile am Anfang und Ende der Animation definieren
• Du kannst auch Deklarationen hinzufügen, um Deine Animation weiter anzupassen. Dazu gehören Geschwindigkeit und Verzögerung

CSS-Animationen sind ideal für Websites, die dynamische und ansprechende Inhalte hinzufügen möchten, ohne die Seite zu sehr zu belasten. Da keine zusätzlichen Skripte benötigt werden, ist es unwahrscheinlich, dass CSS-Animationen die Seite verlangsamen.

Die Vorteile der CSS-Animationen:

• Für die Erstellung von CSS-Animationen sind lediglich CSS-Kenntnisse erforderlich. Sie können ohne JavaScript-Kenntnisse erstellt werden.
• Animationen müssen nicht extern geladen werden. Sie werden direkt im Browser ausgeführt, was die Ladezeit insgesamt verkürzt, die Kompatibilität erhöht und die Reaktionsfähigkeit verbessert.
• In Browsern ohne JavaScript-Unterstützung wird der JavaScript-Code nicht ausgeführt.
• Der Browser steuert die Animation. Dies verbessert die Performance und sorgt für einen reibungslosen Ablauf.

Beispiel 1
Hier ein einfaches Beispiel für eine CSS-Animation:

Wenn Du ein Anfänger in der Entwicklung bist (was auch erfahrenen Entwicklern passieren kann) und Du Probleme bei der Erstellung von CSS-Animationen hast, die nicht so funktionieren, wie Du es dir vorgestellt hast, solltest Du nach diesen häufigen Problemen suchen:

1. Das Property „animation-name“ ist nicht definiert.
   Das Property „animation-name“ ist erforderlich. Ansonsten wird die Animation nicht gerendert.
2. Das Property „animation-duration“ ist nicht definiert.
   Das Property „animation-duration“ muss ebenfalls gesetzt werden. Andernfalls wird der Standardwert auf 0 Sekunden gesetzt und die Animation wird nicht gerendert.
3. Keine @keyframes-Regel definiert ist.
   Animationen werden nur ausgeführt, wenn Animationseigenschaften angewendet werden, und erfordern daher explizite Werte für die zu animierenden Eigenschaften. Diese Werte werden durch Keyframes angegeben. Werden sie nicht in einer @keyframes-Regel angegeben, wird die Animation nicht ausgeführt.
4. Der Name der @keyframes-Regel passt nicht zum Namen der Animation.
   Der Name der @keyframes-Regel muss mit dem Wert das Property „animation-name“ übereinstimmen. Andernfalls kann der Browser die Animation nicht der Keyframes-Deklaration zuordnen und die Animation wird nicht gerendert.
5. Das Property animation-fill-mode ist nicht definiert.
   Standardmäßig setzen CSS-Animationen ein Element in den Zustand zurück, in dem es sich vor der Animation befand, wenn der Animationszyklus beendet ist. Dies kann dazu führen, dass die Animation unterbrochen erscheint. Um dies zu vermeiden, kannst Du den Modus „animation-fill-mode“ definieren.
6. Das CSS Property, welches Du animieren möchtest, ist nicht animierbar.
   Einige CSS-Properties sind nicht animierbar, d.h. sie können nicht in Animationen verwendet werden.
7. Deine Browserversion unterstützt keine CSS-Animationen.
   Wenn Deine CSS-Animation nicht funktioniert, liegt das Problem möglicherweise nicht bei Deinem Code, sondern bei Deinem Browser. Während CSS-Animationen auf den meisten modernen Desktop- und Mobilbrowsern funktionieren, ist dies bei älteren Browsern oder älteren Browserversionen nicht der Fall. In diesem Fall musst Du Deinen Browser wechseln oder aktualisieren.
8. Die Werte für CSS Shorthand Properties sind in der falschen Reihenfolge.
   CSS Shorthand ist ideal, um CSS sauberer zu schreiben, kann aber schwieriger zu schreiben sein, da die Reihenfolge der Werte wichtig ist. Es gibt keine strikte Reihenfolge für jede „sub-property“, aber einige sind wichtig. Zum Beispiel wird der erste „time“ Wert des “animation-duration” Property zugewiesen und der zweite der “animation-delay” Property, daher sollten diese Werte nicht verwechselt werden. Die typische Reihenfolge für die Werte der Shorthand „animation“ Property ist: animation-name, duration, timing-function, delay, iteration-count, direction, fill-mode, play-state.

Wie Du gesehen hast, kannst Du CSS-Keyframe-Animationen verwenden, um fließende Bewegungseffekte nur mit CSS hinzuzufügen, ohne das JavaScript erforderlich ist. Eine weitere Möglichkeit ist die Verwendung von CSS-Transition. Beide sind in Bezug auf die Performance effizient, insbesondere bei der Animation von Deckkraft und Transformationseigenschaften, die von den Browsern sehr gut optimiert werden.

Mit CSS-Transitions kannst Du den Wert einer Eigenschaft als Reaktion auf ein Ereignis, z. B. mouseenter, mouseout, click usw., von einem Anfangszustand in einen Endzustand ändern. Das heißt, wenn Deine Animation nur diese beiden Zustände hat, sind CSS-Transitions das beste und einfachste Werkzeug, das Dir zur Verfügung steht. Häufige Anwendungsfälle für „transitions“ sind „hover“ oder „mouseclick“ , das Ändern der Link- oder Buttonfarbe bei „hover“ , das Ein- und Ausblenden eines Dialogs als Reaktion auf einen Buttonklick und Ähnliches.

Wenn Du Animationen erstellen möchtest, die mehr als einen Start- und Endzustand haben, und wenn Du mehr Kontrolle darüber haben möchtest, was in allen Zwischenzuständen passiert, dann sind CSS-Keyframes die bessere Wahl für Dein Projekt.

CSS-basierte Animationen funktionieren nicht in IE9 und älteren Browsern. Während viele Entwickler altere Browser (insbesondere IE) nicht mehr unterstützen wollen, nutzen viele Kunden dies dennoch.

Mit JavaScript:

• JavaScript-basierte Animationen bieten viel mehr Flexibilität, Leistung und einen besseren Workflow für komplexe Animationen und reichhaltige Interaktivität, da JavaScript unverzichtbar ist – Du kannst die Animation programmatisch definieren.
• Die Erstellung von Animationen mit Hilfe von JavaScript ist im Vergleich zu der Erstellung von CSS-Transitions oder Animationen sehr viel komplexer.

Mit CSS:

• Sie sind für einfache Animationen einfach zu verwenden. Du kannst ohne JavaScript-Kenntnisse mit der Erstellung beginnen, und die Animationen laufen auch bei mäßiger Systemauslastung gut. 
• Wenn der Browser die Kontrolle über die Animationssequenz übernimmt, kann er die Leistung und Effizienz optimieren.

In der Gestaltung von Webseiten spielen CSS-Animationen und JavaScript-Animationen eine zentrale Rolle, wobei jede Methode ihre eigenen Vorzüge und Einsatzmöglichkeiten aufweist.

CSS-Animationen zeichnen sich durch ihre Leichtigkeit der Implementierung und die optimierte Performance aus. Durch die direkte Steuerung durch den Browser eignen sie sich besonders gut für unkomplizierte Animationen, bei denen eine schnelle Umsetzung im Vordergrund steht.

JavaScript-Animationen bieten eine präzisere Kontrolle über den Animationsprozess und sind besonders geeignet für komplexe Szenarien, bei denen Entwickler spezifische Anforderungen an den Ablauf und die Interaktivität haben. Die Möglichkeit, auf Benutzerinteraktionen zu reagieren, macht sie ideal für anspruchsvolle, interaktive Anwendungen.

Die Auswahl zwischen beiden Ansätzen sollte daher von den individuellen Projektanforderungen abhängen. Wenn eine einfache Implementierung und gute Performance im Fokus stehen, können CSS-Animationen die bevorzugte Wahl sein. Für umfassendere Kontrolle und Interaktivität bietet JavaScript eine passende Lösung. Oftmals führt jedoch die geschickte Kombination beider Techniken zu einer ausgewogenen Lösung, die die Stärken von CSS und JavaScript synergistisch nutzt, um ansprechende und effiziente Animationen zu realisieren.