CSS3-Transformationen und Animationen — das Ende von jQuery animate

In den letzten fünf Jahren haben wir Webelemente mit jQuery animiert — fadeIn, slideDown, animate. Es funktionierte, aber auf Kosten der Performance. Jedes Einzelbild der Animation erforderte eine Layout-Neuberechnung und ein Repaint in JavaScript. CSS3 bringt Transitions, Transforms und Animations, die Animationen in den Browser verlagern — mit Hardware-Beschleunigung, flüssigerer Performance und saubererem Code.

CSS3 Transitions¶

Eine Transition ist die einfachste Möglichkeit, eine Animation hinzuzufügen. Man sagt dem Browser: Wenn sich diese Eigenschaft ändert, animiere den Übergang. Nur vier Eigenschaften werden benötigt — transition-property (was animiert werden soll), transition-duration (wie lange), transition-timing-function (Beschleunigungskurve) und transition-delay (Verzögerung). In der Praxis verwenden wir meist die Kurzschreibweise: transition: opacity 0.3s ease.

Transitions reagieren auf Zustandsänderungen — typischerweise :hover, :focus oder das Hinzufügen einer CSS-Klasse über JavaScript. Wenn ein Benutzer über einen Button fährt, ändert sich die Hintergrundfarbe fließend. Wenn ein Dropdown-Menü geöffnet wird, animiert die Opacity von 0 auf 1. Kein JavaScript für die Animation selbst — nur das Hinzufügen einer Klasse, und CSS erledigt den Rest.

Der Unterschied zu jQuery animate ist dramatisch. jQuery animiert, indem es bei jedem Frame einen neuen Inline-Style über JavaScript setzt. Das bedeutet Style-Neuberechnung, Layout und Paint für jeden Frame. Eine CSS-Transition läuft im Compositor-Thread des Browsers, oft mit GPU-Beschleunigung. Auf mobilen Geräten ist der Performance-Unterschied enorm — jQuery-Animationen ruckeln, CSS-Transitions sind flüssig.

CSS3 Transforms¶

Transform ermöglicht die Transformation eines Elements ohne Auswirkung auf das Layout — translate (verschieben), rotate (drehen), scale (Größe ändern) und skew (verzerren). Der entscheidende Punkt ist, dass transform die umliegenden Elemente nicht beeinflusst. Wenn man ein Element mit translate verschiebt, bleiben andere Elemente an ihrem Platz. Das ist der grundlegende Unterschied zur Änderung von margin oder position.

Da transform keine Layout-Neuberechnung auslöst, ist es ideal für Animationen. Das Animieren von transform: translateX(100px) ist deutlich schneller als das Animieren von left: 100px. Der Browser kann Transforms als zusammengesetzte Ebene auf der GPU animieren, während die Änderung von left eine Layout-Neuberechnung für das gesamte Dokument erzwingt.

3D-Transforms (translate3d, rotate3d, perspective) eröffnen weitere Möglichkeiten. Man kann einen Kartenumdreh-Effekt, ein 3D-Karussell oder Parallax-Effekte erstellen. Und es gibt einen wichtigen Trick — selbst wenn man kein 3D benötigt, erzwingt das Hinzufügen von transform: translateZ(0) die Erstellung einer zusammengesetzten Ebene und GPU-Beschleunigung. Es ist ein Hack, aber er funktioniert hervorragend zur Verbesserung der Animationsperformance.

CSS3 Animations¶

Während Transitions den Übergang zwischen zwei Zuständen animieren, ermöglichen Animations die Definition komplexerer Sequenzen mit mehreren Schritten. Mit @keyframes definiert man Keyframes — von 0% bis 100% mit beliebig vielen Zwischenschritten. Dann weist man die Animation einem Element über die animation-Eigenschaft mit Parametern für Dauer, Wiederholungsanzahl, Richtung und mehr zu.

Typische Anwendungen sind Lade-Spinner, pulsierende Benachrichtigungen, endlose Icon-Rotationen oder komplexe Seiteneinführungs-Animationen. Im Gegensatz zu Transitions können Animations beim Seitenlade automatisch starten, sich in einer Endlosschleife wiederholen und über animation-play-state pausiert werden.

Für komplexere Szenarien kombinieren wir Animations mit Transitions. Seiteneinführungs-Animationen verwenden @keyframes, interaktive Hover-Effekte verwenden Transitions. JavaScript nutzen wir nur zum Hinzufügen und Entfernen von Klassen — die Animation selbst ist immer in CSS. Diese Trennung der Zuständigkeiten macht den Code wartbarer.

Vendor-Präfixe — ein notwendiges Übel¶

Der am wenigsten beliebte Teil der CSS3-Entwicklung sind Vendor-Präfixe. Jeder Browser implementiert neue CSS-Eigenschaften mit eigenem Präfix — -webkit- für Chrome und Safari, -moz- für Firefox, -ms- für IE, -o- für Opera. Das bedeutet, für eine Transition muss man vier oder fünf Zeilen schreiben. Es ist mühsam, aber für die Kompatibilität notwendig.

Glücklicherweise gibt es Werkzeuge. CSS-Präprozessoren wie Sass und LESS erlauben die Definition von Mixins, die automatisch alle Präfixe generieren. Und Projekte wie Prefix Free von Lea Verou fügen Präfixe zur Laufzeit automatisch über JavaScript hinzu. In Zukunft werden Präfixe schrittweise entfernt, sobald sich die Spezifikationen stabilisieren.

Praktische Animationsmuster¶

Die häufigsten Animationen in unseren Projekten sind Hover-Effekte auf Buttons (Farbänderung, Schatten, leichte Vergrößerung über scale), das Öffnen und Schließen von Menüs (opacity + translateY), Ladezustände (endlose Rotation) und Seitenübergänge (Einblenden beim Laden von Inhalten). Für jedes dieser Muster haben wir Utility-Klassen in unserem CSS-Framework vorbereitet.

Ein wichtiges Prinzip ist Zurückhaltung. Animationen sollten dem User Interface dienen — Feedback geben, Beziehungen zwischen Elementen anzeigen, Aufmerksamkeit lenken. Zu viele Animationen lenken ab und verlangsamen. Wir empfehlen eine Dauer von 200–300ms für Mikrointeraktionen und maximal 500ms für größere Übergänge. Die Timing-Funktion ease-out fühlt sich für die meisten Interaktionen am natürlichsten an.

Performance — was messen und wie optimieren¶

Chrome DevTools verfügen über ein hervorragendes Panel zur Analyse der Animationsperformance. Der Timeline-Tab zeigt, wie viel Zeit der Browser in jeder Phase verbringt — Scripting, Rendering, Painting, Compositing. Eine ideale Animation verbringt die meiste Zeit in der Compositing-Phase, was GPU-Beschleunigung bedeutet. Wenn man viel Zeit in Rendering und Painting sieht, stimmt etwas nicht.

Die Regel ist einfach — animieren Sie nur transform und opacity. Diese beiden Eigenschaften können rein auf der GPU animiert werden, ohne das Layout zu beeinflussen. Das Animieren von width, height, margin, padding, top, left — all diese Eigenschaften erzwingen eine Layout-Neuberechnung und sind deutlich langsamer. Wenn man die Größe animieren muss, verwendet man transform: scale statt width/height.

Auf mobilen Geräten ist Performance noch wichtiger. Langsamere Prozessoren und begrenzter Speicher bedeuten, dass schlecht optimierte Animationen buchstäblich den Akku leeren. Testen Sie auf echten Geräten, nicht nur im Desktop-Browser. Chrome DevTools können eine langsamere CPU emulieren, was bei der Aufdeckung von Problemen hilft.

Barrierefreiheit von Animationen¶

Nicht jeder Benutzer wünscht sich Animationen. Manche Menschen leiden an vestibulären Störungen und bewegliche Elemente verursachen Übelkeit. Die Media Query prefers-reduced-motion (die bald in Browser kommt) wird es ermöglichen, zu erkennen, dass ein Benutzer reduzierte Bewegung bevorzugt. Schon jetzt sollten wir Animationen so gestalten, dass sie für die Nutzung der Anwendung nicht essentiell sind — sie sind Verbesserungen, keine Voraussetzungen.

Fazit¶

CSS3 Transitions, Transforms und Animations sind die Zukunft der Web-Animationen. Bessere Performance dank GPU-Beschleunigung, sauberere Trennung der Zuständigkeiten (CSS für Animationen, JS für Logik) und native Unterstützung in modernen Browsern. Beginnen Sie noch heute damit, jQuery-Animationen durch CSS-Transitions zu ersetzen — Ihre mobilen Nutzer werden es Ihnen danken.