Grundlagen der CSS-Animationen
CSS-Animationen verwenden @keyframes-Regeln, um die Stufen einer Animation zu definieren, und die animation-Kurzschreibweise, um sie anzuwenden. Keyframes geben an, welche Stile das Element an bestimmten Punkten wahrend der Sequenz haben soll. Die animation-Eigenschaft verknupft die Keyframes mit einem Element und steuert Dauer, Timing, Verzogerung, Wiederholung, Richtung und Fullverhalten.
Die richtige Timing-Funktion wahlen
Timing-Funktionen bestimmen die Beschleunigungskurve einer Animation. Linear erzeugt konstante Geschwindigkeit; ease beginnt langsam, beschleunigt und verlangsamt sich dann; ease-in beginnt langsam; ease-out verlangsamt sich zum Ende; ease-in-out kombiniert beides. Die richtige Wahl hangt vom Kontext ab; Eingangsanimationen profitieren oft von ease-out, wahrend Ausgangsanimationen gut mit ease-in funktionieren.
Performance-Uberlegungen
Animationen, die transform und opacity andern, sind hardwarebeschleunigt und bieten die beste Performance. Das Animieren von Layout-Eigenschaften wie width, height oder margin lost teure Neuberechnungen aus. Verwenden Sie Transforms fur Bewegung, Skalierung und Rotation. Setzen Sie will-change sparsam ein, um dem Browser bevorstehende Animationen anzudeuten.
Barrierefreiheit und reduzierte Bewegung
Respektieren Sie immer die Media-Query prefers-reduced-motion. Benutzer, die unter Bewegungskrankheit oder vestibularen Storungen leiden, konnen reduzierte Bewegung in ihrem Betriebssystem aktivieren. Kapseln Sie Ihre Animationen in einer @media (prefers-reduced-motion: no-preference)-Query oder bieten Sie eine einfachere Alternative.
