CSS3-Animationen debuggen
Geschrieben am: , aktualisiert:
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".
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.
Diese sehr schönen Änderungen sollen dann auch im offiziellen Firefox, Version 33 auftauchen.