Animationen: CSS-Animationseffekte prüfen und ändern

Kayce Basques

Sofia Emelianova

Animationen können Sie in den Chrome-Entwicklertools auf dem Tab Animationen prüfen und ändern.

Übersicht

Wenn Sie Animationen aufnehmen möchten, öffnen Sie den Bereich Animationen. Es erkennt automatisch Animationen und sortiert sie in Gruppen.

Der Bereich Animationen dient hauptsächlich zwei Zwecken:

• Animationen prüfen Sie können die Wiedergabe einer Animation verlangsamen, wiederholen oder den Quellcode einer Animation untersuchen.
• Animationen ändern Timing, Verzögerung, Dauer oder Keyframe-Offset einer Animationsgruppe ändern Die Bearbeitung von Keyframes und Bezier wird nicht unterstützt.

Das Steuerfeld Animationen unterstützt CSS-Animationen, CSS-Übergänge, Webanimationen und die View Transitions API. requestAnimationFrame-Animationen werden noch nicht unterstützt.

Was ist eine Animationsgruppe?

Eine Animationsgruppe besteht aus mehreren Animationen, die scheinbar miteinander in Beziehung stehen.

Im Web gibt es derzeit kein wirkliches Konzept für eine Gruppenanimation. Daher komponieren und zeitlich planen Motion-Designer und Entwickler einzelne Animationen so, dass sie als ein zusammenhängender visueller Effekt erscheinen. Im Steuerfeld Animationen werden ähnliche Animationen basierend auf der Startzeit (ohne Verzögerungen) vorhergesagt und sie werden nebeneinander gruppiert.

Anders ausgedrückt: Im Bereich Animationen werden Animationen, die im selben Skriptblock ausgelöst wurden, gruppiert. Asynchrone Animationen werden jedoch unterschiedlichen Gruppen zugeordnet.

Bereich „Animationen“ öffnen

Es gibt zwei Möglichkeiten, den Bereich Animationen zu öffnen:

• Wählen Sie Entwicklertools anpassen und steuern aus > Weitere Tools > Animationen:

• Öffnen Sie das Befehlsmenü, indem Sie eine der folgenden Tasten drücken:

  • macOS: Befehlstaste + Umschalttaste + P
  • Windows, Linux oder ChromeOS: Strg + Umschalttaste + P

  Geben Sie dann Show Animations ein und wählen Sie das entsprechende Steuerfeld aus.

Standardmäßig wird der Bereich Animationen als Tab neben der Leiste Konsole geöffnet. Als Ausklapptab können Sie ihn mit jedem Bereich verwenden oder an den Anfang der DevTools-Seite verschieben.

Im Steuerfeld Animationen werden beim Öffnen automatisch laufende Animationen erfasst. Wenn eine Animation beim Laden der Seite ausgelöst wird oder bereits beendet wurde, aktualisieren Sie die Seite mit geöffnetem Steuerfeld.

Benutzeroberfläche des Animationsbereichs kennenlernen

Der Bereich Animationen besteht aus vier Hauptbereichen:

1. Kontrollen. Hier können Sie aufgezeichnete Animationen sperren alle löschen, pausieren pausieren oder play_arrow fortsetzen oder die Geschwindigkeit der ausgewählten Animationsgruppe ändern.

2. Übersicht: Zeigt erfasste Animationsgruppen zweier Typen, die mit Symbolen gekennzeichnet sind: Maus mit Scroll-Modus und Zeitplan regulär (zeitbasiert).

   Wählen Sie hier eine Animationsgruppe aus, um sie im Bereich Details zu untersuchen und zu ändern.

3. Zeitachse Je nach Art der Animationsgruppe kann die Zeitachse Folgendes darstellen:

   • In Pixeln für scrollbare Mausanimationen.
   • In Millisekunden für zeitbasierte Animationen planen.

   Auf der Zeitachse können Sie eine Animation noch einmal abspielen, noch einmal abspielen, per Scrubbing verschieben oder zu einer bestimmten Stelle springen.

4. Details Prüfen und ändern Sie die ausgewählte Animationsgruppe.

Wenn Sie eine Animation aufnehmen möchten, starten Sie sie, während der Bereich Animationen geöffnet ist.

Animationen prüfen

Nachdem Sie eine Animation aufgenommen haben, haben Sie mehrere Möglichkeiten, sie wiederzugeben:

• Bewegen Sie den Mauszeiger im Bereich Übersicht auf die Miniaturansicht, um eine Vorschau aufzurufen.
• Ziehen Sie den Abspielkopf (rote vertikale Leiste), um die Animation des Darstellungsbereichs zu verschieben, oder klicken Sie auf eine beliebige Stelle auf der Zeitachse, um den Abspielkopf auf einen bestimmten Punkt zu setzen. Die Animation wird fortgesetzt, wenn sie bereits wiedergegeben wurde, andernfalls wird sie beendet.
• Wählen Sie im Bereich Übersicht die Animationsgruppe aus, damit sie im Bereich Details angezeigt wird. und klicken Sie auf Neu abspielen. Die wird die Animation im Darstellungsbereich wiedergegeben.

Klicken Sie in der Leiste Steuerelemente auf die Schaltflächen Animation speed (Animationsgeschwindigkeit), um die Vorschaugeschwindigkeit der ausgewählten Animationsgruppe zu ändern.

Animationsdetails ansehen

Nachdem Sie eine Animation erfasst haben, klicken Sie im Bereich Übersicht darauf, um die Details aufzurufen.

Im Bereich Details erhält jede einzelne Animation eine eigene Zeile. Wenn Sie den vollständigen Namen des entsprechenden Elements sehen möchten, ändern Sie die Größe der Namensspalte.

Bewegen Sie den Mauszeiger auf eine Animation, um sie im Darstellungsbereich hervorzuheben. Klicken Sie im Bereich Elemente auf die Animation, um sie auszuwählen.

Einige Animationen wiederholen sich unbegrenzt, wenn ihre animation-iteration-count-Eigenschaft auf infinite gesetzt ist. Im Steuerfeld Animationen werden die zugehörigen Definitionen und Iterationen angezeigt.

Der dunkelste Bereich ganz links in einer Animation ist die Definition. Die rechten, verblassten Bereiche stehen für Iterationen.

Im nächsten Screenshot repräsentieren die Abschnitte 2 und 3 beispielsweise des ersten Abschnitts.

Wenn auf zwei Elemente dieselbe Animation angewendet wird, werden ihnen im Steuerfeld Animationen die Elemente in derselben Farbe. Die Farbe selbst ist zufällig und hat keine Bedeutung. Im Screenshot unten sehen Sie beispielsweise Die beiden Elemente div.eye.left::after und div.eye.right::after haben dieselbe Animation (eyes) auf sie angewendet wird, genau wie die Elemente div.feet::before und div.feet::after.

Animationen ändern

Es gibt drei Möglichkeiten, eine Animation über den Bereich Animationen zu ändern:

• Dauer der Animation.
• Keyframe-Timings
• Startverzögerung

Angenommen, der folgende Screenshot stellt die ursprüngliche Animation dar:

Wenn Sie die Dauer einer Animation ändern möchten, ziehen Sie den ersten oder letzten Kreis.

Wenn in der Animation Keyframe-Regeln definiert sind, werden diese als weiße innere Kreise dargestellt. Ziehen Sie eines davon, um das Timing des Keyframes zu ändern.

Um einer Animation eine Verzögerung hinzuzufügen, klicken Sie auf die Animation selbst (nicht auf die Kreise) und ziehen Sie sie dann an eine beliebige Stelle.

@keyframes live bearbeiten

Wenn Sie @keyframes unter Stile ändern, sehen Sie die Effekte sofort im Bereich Animationen.

Probieren Sie es auf dieser Demoseite aus:

1. Öffnen Sie den Bereich Animationen. Die laufende Pulsanimation auf der Seite wird automatisch erfasst. Wählen Sie die Animation unter den Steuerelementen in der Aktionsleiste aus.
2. Unter Elemente prüfen Sie das Element mit class="pulser". Unter Stile finden Sie den Abschnitt @keyframes pulse.
3. Ändern Sie beispielsweise den zweiten Keyframe von 50% zu 20%.
4. Sehen Sie sich an, wie sich Ihre Änderungen unter Stile auf die Animation auswirken, die im Steuerfeld Animationen erfasst wird.

Pseudoelemente ::view-transition während einer Animation bearbeiten

Mit der View Transitions API können Sie das DOM in einem einzigen Schritt ändern und gleichzeitig einen animierten Übergang zwischen den beiden Zuständen erstellen. Während einer Animation erstellt die API einen Pseudo-Elementbaum mit der folgenden Struktur:

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

Sie können diese Struktur unter Elemente bearbeiten > Stile:

1. Öffnen Sie die Entwicklertools und prüfen Sie eine Seite, auf der die View Transitions API verwendet wurde. Beispiel: diese Demoseite.
2. Klicken Sie unter Animationen auf Pausieren Pausieren.

3. Lösen Sie auf der Seite eine Animation aus. Im Steuerfeld Animationen wird sie erfasst und sofort pausiert. Die ::view-transition-Struktur befindet sich jetzt im DOM über dem <head>-Element.

   

4. Ändern Sie unter Elemente > Stile das CSS der ::view-transition-Pseudoelemente.

5. Setzen Sie die Animation fort und spielen Sie sie noch einmal ab, um das Ergebnis zu sehen.

Weitere Informationen finden Sie unter Einfache und flüssige Übergänge mit der View Transitions API.