Florence Maurice

Webthemen

CSS3-Animationen debuggen

Geschrieben am: , aktualisiert:

Blaue Weltkugel

Letztens habe ich eine Möglichkeit gesucht, CSS3-Animationen im Browser zu debuggen - und bin in den gängigen Entwicklertools nicht so recht fündig geworden. Um so erfreulicher fand ich es, als ich jetzt im Firefox Nightly die neuen Möglichkeiten entdeckt habe (ausprobiert habe ich es im Firefox Nightly 34.0a1).

Wenn man ein Element untersucht, dem eine Animation zugewiesen ist, erhält man in den Firefox-Entwicklertools vom Firefox Nightly die Keyframes darunter angezeigt und kann diese editieren - im gezeigten Beispiel heißt die Animation "leuchten".

Animationen debuggen im Firefox

Möchte man hingegen den Ablauf debuggen, also beispielsweise eine Verzögerung am Anfang oder Schluss einbauen, so kann man die zugrundeliegende Bezier-Kurve durch einen Klick auf die Angabe zum Ablauf bei der Animation verändern.

Über Bezier-Kurve den Ablauf von Animationen steuern

Diese sehr schönen Änderungen sollen dann auch im offiziellen Firefox, Version 33 auftauchen.