Ich bin neulich auf das Animations-Panel in den Chrome DevTools gestoßen und hätte vor reiner Freude fast einen Sprung aus meinem Sitz gemacht. Nicht nur, dass ich überhaupt nicht wusste, dass es so etwas gibt, es war sogar besser, als ich es mir hätte erhoffen können: Es ermöglicht Ihnen, CSS-Animationen zu steuern und zu manipulieren und zu visualisieren, wie alles unter der Haube funktioniert.
Um auf das Panel zuzugreifen, navigieren Sie im oberen Menü rechts zu Mehr Tools → Animationen, wenn die DevTools geöffnet sind.
Viele der Tutorials, die ich dazu gefunden habe, waren ziemlich kompliziert, also treten wir einen Schritt zurück und betrachten zunächst ein kleineres Beispiel: hier ist eine Demo, bei der sich die Hintergrundfarbe des html-Elements beim Überfahren mit der Maus von Schwarz zu Orange wechselt.
html {
cursor: pointer;
background-color: #333;
transition: background-color 4s ease;
}
html:hover {
background-color: #e38810;
}Stellen wir uns vor, wir möchten die Übergangszeit von 4s verkürzen. Es kann ziemlich lästig sein, diese Zahl im Element-Inspektor ständig auf und ab zu ändern. Normalerweise hätte ich die DevTools geöffnet, das Element im DOM gefunden und es dann ganz langsam manipuliert, indem ich einen Wert eingebe oder die Pfeiltasten benutze. Stattdessen können wir diese Demo starten, die DevTools öffnen und zum Animations-Tab wechseln, der in etwa so aussehen sollte:
Standardmäßig "hört" Chrome auf Animationen, die stattfinden. Sobald sie auftreten, werden sie zur Liste hinzugefügt. Sehen Sie, wie diese Animationsblöcke wie eine Audio-Welle dargestellt werden? Das ist ein Frame, also ein Akt, einer Animation, und Sie können auf der Zeitleiste darüber jeden folgenden Frame sehen. Bei einer Animation zeigt uns der Inspektor sogar an, welche Eigenschaft geändert wird, z. B. background-color oder transform. Wie praktisch ist das denn?
Wir können diese Animation dann ändern, indem wir diese Leiste greifen und sie bewegen.
…und die Animation wird sofort aktualisiert – kein Klicken und Bearbeiten einer Animation auf die alte Weise mehr! Außerdem haben Sie vielleicht bemerkt, dass das Überfahren eines Animations-Frames das animierte Element blau hervorhebt. Das ist nützlich, wenn Sie eine komplexe Animation bearbeiten und vergessen, was dieses verrückte seltsame Pseudo-Element bewirkt. Wenn Sie mehrere Animationen auf einer Seite haben, können Sie diese alle in diesem Abschnitt sehen, genau wie in dieser Demo.
Was wir hier tun, ist, sowohl das .square als auch das .circle zu animieren, wenn wir mit der Maus über das html-Element fahren, sodass zwei separate divs effektiv im selben Zeitrahmen animiert werden – deshalb können Sie sie genau so im selben Abschnitt sehen.
Ich kann mir vorstellen, dass die Inspektion von Animationen auf diese Weise auch für winziges Icon-Design super nützlich sein könnte. Nehmen Sie diesen Pen von Hamburger-Menü-Animationen von Jesse Couch, wo Sie vielleicht alles verlangsamen möchten, um die Dinge genau richtig hinzubekommen. Nun, mit dem Animationsinspektor-Tool können Sie genau das tun.
Diese Schaltflächen in der oberen linken Ecke steuern die Wiedergabegeschwindigkeit der Animation. Wenn Sie also 10 % drücken, verlangsamt sich alles bis zum Stillstand – was Ihnen genügend Zeit gibt, wirklich an den Dingen herumzufummeln, bis sie perfekt sind.
Ich habe mich hier auf Chrome konzentriert, aber es ist nicht der einzige Browser mit einem Animationsinspektor – das Tool von Firefox ist in jeder Hinsicht genauso nützlich. Der einzige sofort erkennbare Unterschied, den ich gefunden habe, war, dass Chrome auf alle Animationen auf einer Seite achtet und sie anzeigt, sobald sie erfasst wurden. Aber bei Firefox müssen Sie das Element inspizieren und erst dann zeigt es Ihnen die an dieses Element gebundenen Animationen. Wenn Sie also sehr komplexe Animationen durchführen, könnte das Tool von Chrome ein klein wenig hilfreicher sein.
Nun, das wird super nützlich sein!
Sehr cool!
Sehr praktisch für mich. Danke!
Mit Firefox, wenn Sie das Wurzelelement im Inspektor auswählen, sehen Sie alle Animationen im Dokument.
Das ist super nützlich, ich wünschte nur, diese Tools würden mir auch erlauben, CSS-Animations-Keyframes zu bearbeiten.