CSS-Animationen und Übergänge

• CSS-Animationen ermöglichen das Animieren von HTML-Elementen ohne JavaScript oder Flash.
• Animationen werden mithilfe von Keyframes definiert, die die Stile zu verschiedenen Zeitpunkten der Animationssequenz festlegen.

Keyframes

• Keyframes enthalten die Stile, die ein Element zu bestimmten Zeiten hat.
• Ein Keyframe wird mit der @keyframes-At-Regel definiert, gefolgt von einem Namen für die Animation.
• Keyframes enthalten Stilregeln, die zu bestimmten Prozentsätzen der Animationsdauer angewendet werden.
• "0%" ist der Beginn der Animation, "100%" ist das Ende der Animation.
• Anstelle von "0%" kann "from" und anstelle von "100%" "to" verwendet werden.
• Es können mehrere Keyframes definiert werden, um komplexe Animationen mit verschiedenen Phasen zu erstellen.

Übergänge

• CSS-Übergänge ermöglichen das sanfte Ändern von Eigenschaftswerten über einen bestimmten Zeitraum.
• Übergänge werden typischerweise durch Pseudo-Klassen wie :hover, :active oder :focus ausgelöst oder wenn eine Klasse mit JavaScript hinzugefügt/entfernt wird.
• Es wird angegeben, welche CSS-Eigenschaften übergehen sollen, die Dauer des Übergangs und die Timing-Funktion.
• transition-property: Gibt den Namen der CSS-Eigenschaft an, auf die der Übergang angewendet wird.
• transition-duration: Gibt die Zeitdauer an, die der Übergang benötigt, in Sekunden (s) oder Millisekunden (ms).
• transition-timing-function: Gibt die Beschleunigungskurve des Übergangs an.
• transition-delay: Gibt eine Verzögerung (in Sekunden oder Millisekunden) an, bevor der Übergang beginnt.
• Eine Kurzschreibweise, transition, steht zur Verfügung, um alle Übergangseigenschaften in einer Zeile zu definieren.
• Beispiel: transition: background-color 0.3s ease, color 0.3s ease;

Timing-Funktionen

• CSS-Timing-Funktionen definieren, wie Zwischenwerte der betroffenen CSS-Eigenschaften berechnet werden.
• Sie ermöglichen das Ändern der Geschwindigkeit eines Animationseffekts.
• Gibt die Beschleunigungskurve des Übergangs an.
• Gängige Werte sind:
  • ease: Standardwert. Beginnt langsam, beschleunigt in der Mitte und verlangsamt sich am Ende.
  • linear: Die gleiche Geschwindigkeit von Anfang bis Ende.
  • ease-in: Beginnt langsam.
  • ease-out: Endet langsam.
  • ease-in-out: Beginnt langsam und endet langsam.
  • cubic-bezier(n,n,n,n): Definiert eigene Werte in einer Cubic-Bezier-Funktion.

Animationseigenschaften

• Diese Eigenschaften steuern, wie die Animationssequenz abgespielt wird.
• animation-name: Gibt den Namen der zu verwendenden @keyframes-Animation an.
• animation-duration: Gibt die Zeitdauer an, die eine Animation benötigt, um einen Zyklus zu durchlaufen.
• animation-timing-function: Gibt die Beschleunigungskurve der Animation an.
• animation-delay: Gibt eine Verzögerung an, bevor die Animation beginnt.
• animation-iteration-count: Gibt an, wie oft eine Animation abgespielt werden soll.
• Mögliche Werte sind eine Zahl oder "infinite".
• animation-direction: Gibt an, ob die Animation vorwärts, rückwärts oder in abwechselnden Zyklen abgespielt werden soll.
• Mögliche Werte: normal, reverse, alternate, alternate-reverse.
• animation-fill-mode: Gibt den Stil an, der auf das Element angewendet wird, wenn die Animation nicht abgespielt wird (bevor sie beginnt, nachdem sie endet oder beides).
• Mögliche Werte: none, forwards, backwards, both.
• animation-play-state: Gibt an, ob die Animation läuft oder pausiert ist.
• Mögliche Werte: running, paused.
• animation: Eine Kurzschreibweise zum gleichzeitigen Festlegen aller Animationseigenschaften.
• Beispiel: animation: myAnimation 5s linear 2s infinite alternate;

Browserkompatibilität

• CSS-Animationen und -Übergänge werden von modernen Browsern weitgehend unterstützt.
• Fügen Sie Anbietervorsätze (-webkit-, -moz-, -o-, -ms-) für ältere Browserversionen hinzu, insbesondere für komplexere Animationen oder Übergänge.
• Verwenden Sie Tools wie Autoprefixer, um automatisch die erforderlichen Vorsätze hinzuzufügen.
• Testen Sie Animationen und Übergänge in verschiedenen Browsern, um ein einheitliches Verhalten sicherzustellen.
• Erwägen Sie, Fallback-Lösungen für ältere Browser bereitzustellen, die diese Funktionen nicht unterstützen.