Debugger für Animationen und Übergänge

Chrome DevTools → More tools → Animations (oder Cmd+Shift+P → „Animations“). Der Bereich zeichnet CSS-Übergänge und -Animationen während ihrer Ausführung auf und stellt sie auf einer Zeitleiste mit Funktionen zum Scrubbing und zur Steuerung der Wiedergabegeschwindigkeit dar.

Der Animationsbereich bietet Wiedergabegeschwindigkeiten von 10 %, 25 % und 100 %. Eine Verlangsamung auf 10 % macht Timing-Probleme, fehlerhafte Easing-Kurven und bei voller Geschwindigkeit unsichtbares Ruckeln sichtbar – unverzichtbar beim Debuggen komplexer Choreografien mit mehreren Elementen.

Jede aufgezeichnete Animation erscheint als Zeile mit dem Namen ihres Elements, einem Balken für die Dauer, einem Versatz für die Verzögerung und der Anzahl der Iterationen. Die Rauten der Keyframes zeigen Änderungen der Timing-Funktion. Wenn Sie den Mauszeiger über eine Zeile bewegen, wird das Element im Viewport hervorgehoben.

Ziehen Sie den Abspielzeiger im Animationsbereich an eine beliebige Stelle der Animationszeitleiste. Die Seite rendert genau diesen Frame. So können Sie jede Animation jederzeit anhalten und gleichzeitig die Positionen, die Deckkraft und die Transformationswerte der Elemente im Bereich „Computed“ untersuchen.

Klicken Sie auf eine Animationszeile, um sie aufzuklappen. Die einzelnen Keyframes erscheinen als Rauten auf der Zeitleiste. Klicken Sie auf eine Keyframe-Raute, um zur entsprechenden @keyframes-Regel im Bereich „Styles“ zu springen und sie mit einer Live-Vorschau zu bearbeiten.

Chrome DevTools zeigt für jedes Animationssegment cubic-bezier-Kurven an. Klicken Sie im Bereich „Styles“ neben einer Timing-Funktion auf das Kurvensymbol, um den cubic-bezier-Editor zu öffnen. Ziehen Sie die Kontrollpunkte und beobachten Sie, wie die Animation in Echtzeit aktualisiert wird.

CSS-Übergänge werden im Animationsbereich aufgezeichnet, sobald sie ausgelöst werden. Lösen Sie einen Hover-Effekt oder eine Klassenänderung aus, damit der Bereich den Übergang erfasst. Untersuchen Sie Dauer, Verzögerung und Timing-Funktion – besonders hilfreich, wenn sich Übergänge falsch anfühlen, ihre Ursache aber unklar ist.

Wenn unter Rendering → Layer Borders die Ebenenränder aktiviert sind (DevTools → Rendering), zeigen animierte Elemente auf einer eigenen GPU-Ebene grüne Ränder. Nicht zusammengesetzte Animationen (width, top, color) zeigen keinen Ebenenrand und können zu Paint Flashing führen – sichtbar, wenn Paint Flashing aktiviert ist.

Zeichnen Sie während der Animation ein Performance-Profil auf. Suchen Sie im Flame-Chart nach langen Paint- oder Layout-Ereignissen, die mit Animations-Frames zusammenfallen. Animationen, die ausschließlich auf dem Compositor ausgeführt werden (transform/opacity), erscheinen nur als Composite-Layer-Ereignisse – sie sind schnell und benötigen kein Paint.

JavaScript-Animationen mit rAF erscheinen im Performance-Bereich unter „Frames“. Lange rAF-Callbacks, die mehr als 16 ms benötigen, führen zu ausgelassenen Frames. Analysieren Sie den Callback, um aufwendige Berechnungen zu finden, und verlagern Sie sie nach Möglichkeit mithilfe von Web Workers aus dem Hauptthread.

Die Web Animations API (element.animate()) und auf WAAPI basierende Bibliotheken erscheinen neben CSS-Animationen im Animationsbereich. Der Bereich kann die Quelle – CSS oder WAAPI – nicht unterscheiden, aber Scrubbing und Zeitlupensteuerung funktionieren bei beiden.

Der Animationsbereich von DevTools zeichnet CSS-Übergänge und -Animationen mit einer Zeitleiste auf, die sich per Scrubbing steuern lässt, sowie mit variabler Wiedergabegeschwindigkeit, Keyframe-Inspektion und cubic-bezier-Bearbeitung. Zusammen mit Performance-Profiling und der Visualisierung von Ebenen bietet er umfassende Werkzeuge zum Debuggen der Korrektheit und Leistung von CSS-Animationen.