Was sind CSS-Animationen?
CSS-Animationen ermöglichen es Ihnen, HTML-Elemente ohne JavaScript zu animieren. Sie verwenden @keyframes-Regeln, um Animationszustände zu definieren, und die Shorthand-Eigenschaft animation, um Timing, Dauer und Wiederholung zu steuern. CSS-Animationen werden von der GPU beschleunigt und funktionieren gut für Übergänge, Hover-Effekte und Lade-Indikatoren.
Animationseigenschaften
- animation-name: Verweist auf eine
@keyframes-Regel. - animation-duration: Wie lange ein Zyklus dauert (z. B. 1s, 500ms).
- animation-timing-function: Geschwindigkeitskurve (ease, linear, ease-in-out usw.).
- animation-iteration-count: Häufigkeit der Wiederholung der Animation (Zahl oder
infinite).
Häufig gestellte Fragen
Sind CSS-Animationen besser als JavaScript-Animationen?
Bei einfachen Übergängen und dekorativen Effekten sind CSS-Animationen oft performanter, da sie an die GPU ausgelagert werden können. JavaScript-Animationen bieten mehr Kontrolle für komplexe, interaktive oder physikbasierte Sequenzen.
Kann ich mehrere Animationen auf ein Element kombinieren?
Ja. Trennen Sie mehrere Animationswerte durch Kommas in der animation-Eigenschaft. Jede Animation kann ihre eigenen Keyframes, Dauer und Timing-Funktion haben.