@keyframes-Syntax und Animationseigenschaft

Mit CSS-Animationen können Sie mehrstufige Änderungen von Eigenschaften über die Zeit mithilfe von @keyframes definieren. Anders als Transitionen starten Animationen automatisch oder beim Hinzufügen einer Klasse und unterstützen komplexe Abläufe.

Definieren Sie Animationsschritte mit Prozentangaben (0 % bis 100 %) oder den Schlüsselwörtern from/to:

Wenden Sie eine Animation mit der Kurzschreibweise animation oder ihren Untereigenschaften auf ein Element an:

Verweist anhand des Namens auf die @keyframes-Regel:

Legt fest, wie lange ein Animationszyklus dauert:

Verwenden Sie Keyframes mit Prozentangaben für komplexe mehrstufige Animationen:

Jeder Keyframe-Schritt kann mehrere Eigenschaften gleichzeitig animieren:

Die Timing-Funktion kann für jeden Keyframe-Schritt einzeln festgelegt werden. Sie steuert das Easing zwischen den einzelnen Wegpunkten und nicht die gesamte Animation.

Wenden Sie mehrere Animationen mit durch Kommas getrennten Werten auf ein Element an:

Halten Sie Animationen dynamisch an und setzen Sie sie fort:

Wählen Sie passend:

• Transition: zwei Zustände, durch eine Zustandsänderung ausgelöst, einfach
• Animation: mehrere Schritte, startet selbstständig, kann wiederholt werden, bietet mehr Kontrolle

Welches @keyframes-Schlüsselwort stellt den Startzustand der Animation dar?

Definieren Sie Animationsschritte mit @keyframes und verwenden Sie dafür from/to oder Wegpunkte mit Prozentangaben. Wenden Sie die Animation mit der Kurzschreibweise animation an und geben Sie dabei Name, Dauer, Timing und Fill-Mode an. Mehrere Animationen werden durch Kommas getrennt. Verwenden Sie Transitionen für einfache Änderungen zwischen zwei Zuständen und Animationen für komplexe Abläufe.