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. Animationen werden automatisch erkannt und in Gruppen sortiert.

Der Bereich Animationen dient hauptsächlich zwei Zwecken:

• Animationen prüfen: Den Quellcode einer Animation verlangsamen, erneut wiedergeben oder prüfen Gruppe.
• Animationen anpassen: Sie können das Timing, die Verzögerung, die Dauer oder die Keyframe-Offsets eines Animationsgruppe. Die Bearbeitung von Keyframes und Bezier wird nicht unterstützt.

Der Bereich 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 einer Reihe von Animationen, die so scheinen, dass sie zusammenhängen.

Im Moment gibt es im Web noch kein Konzept für Gruppenanimationen, sodass Motion-Designschaffende und -Entwickler einzelne Animationen erstellen und zeitlich festlegen, damit sie als ein kohärenter 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ü mit einer der folgenden Optionen:

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

  Beginnen Sie dann mit der Eingabe von Show Animations und wählen Sie das entsprechende Leistenfeld aus.

Standardmäßig wird der Bereich Animationen als Tab neben der Leiste Konsole geöffnet. Als Leisten-Tab kannst du ihn mit jedem Bereich verwenden oder an den Anfang der Entwicklertools verschieben.

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

Benutzeroberfläche des Animationsbereichs kennenlernen

Der Bereich Animationen hat vier Hauptbereiche:

1. Kontrollen. Hier können Sie blockieren, alle erfassten Animationsgruppen löschen, Animationen pausieren, anhalten 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, lösen Sie sie aus, während der Bereich Animationen geöffnet ist.

Animationen prüfen

Nachdem Sie eine Animation aufgenommen haben, können Sie sie auf verschiedene Arten wiedergeben:

• Bewegen Sie den Mauszeiger im Bereich Übersicht auf die Miniaturansicht, um eine Vorschau davon zu sehen.
• 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 weiter abgespielt, wenn sie bereits abgespielt wurde, und stoppt ansonsten.
• 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äche Animationsgeschwindigkeit , um die Vorschaugeschwindigkeit der ausgewählten Animationsgruppe zu ändern.

Animationsdetails ansehen

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

Im Bereich Details wird für jede Animation eine eigene Zeile angezeigt. 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 auf die Animation, um sie im Bereich Elements.

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 dunklere Bereich ganz links in einer Animation ist die Definition. Die rechten, stärker verblassten Abschnitte Iterationen dargestellt.

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) 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
• Startzeitverzögerung.

Nehmen wir für diesen Abschnitt an, dass der nächste Screenshot die ursprüngliche Animation darstellt:

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, werden die Effekte sofort im Bereich Animationen angezeigt.

Probieren Sie es auf dieser Demoseite aus:

1. Öffnen Sie den Bereich Animationen. Die Pulsanimation auf der Seite wird automatisch erfasst. Wählen Sie die Animation unter den Steuerelementen in der Aktionsleiste aus.
2. Unter Elements prüfen Sie das Element mit class="pulser". Unter Elements 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 Elements bearbeiten > Stile:

1. Öffnen Sie die Entwicklertools und prüfen Sie eine Seite, auf der die View Transitions API verwendet wurde. Hier ein 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. Gehen Sie unter Elements > Styles: Ändern Sie den CSS-Code der Pseudoelemente ::view-transition.

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

Weitere Informationen finden Sie unter Reibungslose und einfache Übergänge mit der View Transitions API.