CSSAnimationen

CSSAnimationen bezeichnet in der Webentwicklung die Möglichkeit, Veränderungen von Stilwerten über festgelegte Zeitverläufe sichtbar zu machen. Sie basieren auf Keyframes, die Zwischenzustände definieren, sowie auf einer Reihe von Animations-Eigenschaften, mit denen Dauer, Verzögerung, Wiederholungen und Verhalten gesteuert werden. Ein Keyframe-Block legt fest, welche CSS-Eigenschaften zu bestimmten Zeitpunkten gesetzt sind, typischerweise bei 0% (from) und 100% (to) oder bei benannten Wegpunkten.

Die einfachste Verwendung erfolgt über die Kurzschreibweise animation, die Parameter wie name, duration, timing-function, delay, iteration-count, direction, fill-mode und play-state zusammenfasst. Beispielsweise könnte man eine Animation namens fadeIn definieren, die in 2 Sekunden von opacity 0 auf opacity 1 übergeht, mit einer forwards-Fill-Mode, damit der Endzustand beibehalten wird. Animationen unterscheiden sich von CSS-Übergängen dahingehend, dass Übergänge an Zustandsänderungen gebunden sind, während Animationen ohne explizite Trigger laufen können und mehrere Zustandsstufen enthalten können.

Bestandteile der Technik sind die Definition von Keyframes und die Zuweisung der Animation an ein Element. Zur Leistung sollten Transform- und Opacity-Animationen bevorzugt werden, da sie oft von der Compositing-Ebene der Rendering-Pipeline beschleunigt werden. Das Präferenzmaß prefers-reduced-motion lässt sich nutzen, um langsame oder schwere Animationen für Nutzer mit reduzierter Bewegungspräferenz auszuschalten.

Kompatibilität: CSS-Animationen werden in modernen Browsern breit unterstützt; bei älteren Browsern oder eingeschalteter Barrierefreiheit ist eine fallback-gesteuerte Umsetzung sinnvoll. Typische Anwendungsbereiche liegen in Benutzeroberflächen, Hinweisen, Intro-Effekten und Mikro-Animationen.