Entwicklertools-Tipps: CSS-Animationen überprüfen und ändern

Sofia Emelianova

Der Tab Animationen in den Chrome-Entwicklertools ist ein leistungsstarkes Tool, mit dem Sie CSS-Animationszeiten verlangsamen, wiedergeben, anpassen und die Ergebnisse sofort sehen können.

Auf dem Tab Animationen werden Animationen automatisch aufgezeichnet, übersichtlich gruppiert und Sie haben folgende Möglichkeiten:

• Animationen können wiederholt und verlangsamt werden, um sie besser zu prüfen.
• Sie können Dauern, Zeitangaben und Verzögerungen anpassen, indem Sie Punkte auf einer Zeitachse ziehen, anstatt CSS-Werte manuell zu schätzen und festzulegen.

Außerdem können Sie die Zeiträume für die Übergänge bearbeiten und benutzerdefinierte cubic-bezier-Kurvenwerte mit dem Übergangseditor im Bereich Elemente > Stile festlegen. Weitere Informationen finden Sie unter Timing von Animationen und Übergängen mit dem Easing-Editor bearbeiten.

Wenn Sie mehr praktische Erfahrungen sammeln möchten, folgen Sie dem Leitfaden CSS-Animationseffekte prüfen und ändern.