Der Animations-Inspektor gibt Ihnen vollständige Kontrolle über jede CSS-Animation und jeden Übergang auf einer Webseite. Halten Sie alle Animationen auf einmal an, verlangsamen Sie sie für eine Frame-für-Frame-Inspektion, beschleunigen Sie sie zum Testen der Leistung oder navigieren Sie manuell durch die Timeline — alles aus einem einzigen schwebenden Panel, ohne die Browser-DevTools zu berühren.
CSS-Animationen können notorisch schwierig zu debuggen sein. Sie laufen schnell, überlappen sich, und Browser-DevTools zwingen Sie, durch berechnete Styles zu suchen. Animations-Inspektor löst dies, indem er automatisch jede @keyframes-Animation und jeden CSS-Übergang auf der Seite erkennt, sie mit ihrer vollständigen Konfiguration (Dauer, Easing, Verzögerung, Iterationsanzahl) auflistet und Ihnen Wiedergabesteuerungen bietet, die global oder pro Animation funktionieren. Egal ob Sie einen ruckelnden Hover-Effekt debuggen, das Timing einer Seiteneingangssequenz verfeinern oder verstehen möchten, wie eine komplexe Animationsbibliothek unter der Haube funktioniert — dieses Tool gibt Ihnen die Kontrolle.
Frieren Sie sofort jede Animation auf der Seite mit einem einzigen Klick ein. Alle Animationen pausieren an ihrer aktuellen Position — nicht zurück zum Anfang gesetzt. Klicken Sie auf Abspielen, um genau dort fortzufahren, wo sie gestoppt haben. Unverzichtbar zum Inspizieren von mittleren Animationszuständen, die mit dem bloßen Auge unmöglich zu erkennen sind.
Passen Sie die Wiedergabegeschwindigkeit aller Animationen gleichzeitig an. Wählen Sie aus 0,25x (Viertelgeschwindigkeit), 0,5x, 1x (normal), 2x oder 4x. Bei 0,25x sind selbst die schnellsten 200-ms-Übergänge leicht zu beobachten und zu debuggen.
Jede CSS-Animation und jeder Übergang auf der Seite wird automatisch erkannt und in einer scrollbaren Liste angezeigt. Jeder Eintrag zeigt den Animationsnamen (oder die Übergangseigenschaft), Dauer, Timing-Funktion (ease, linear, cubic-bezier), Verzögerung, Iterationsanzahl und aktuellen Laufzustand.
Ziehen Sie den Timeline-Scrubber, um manuell Frame für Frame durch eine Animation zu navigieren. Sehen Sie genau, was bei 25 %, 50 % oder an jedem Punkt im Animationszyklus passiert. Die Seite aktualisiert sich in Echtzeit, während Sie ziehen.
Pausieren, abspielen oder Geschwindigkeit für einzelne Animationen unabhängig anpassen. Isolieren Sie eine einzelne Animation, um sie zu debuggen, ohne von anderen bewegten Elementen auf der Seite abgelenkt zu werden.
Klicken Sie auf eine Animation in der Liste, um ihre vollständige CSS-Deklaration zu sehen — @keyframes-Definition, Animation-Shorthand-Aufschlüsselung, berechnete Start- und Endzustände und auf welche Elemente sie angewendet wird.
Animations-Inspektor covers the following, organized by category:
animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-statetransition-propertytransition-durationtransition-timing-functiontransition-delayeaseease-inease-outease-in-outlinearcubic-bezier()steps()transformtransform-origintranslaterotatescaleskewVerlangsamen Sie eine Animation auf 0,25x, um genau zu identifizieren, wo ein Stotter oder Ruckeln auftritt. Überprüfen Sie, ob das Problem durch Layout-Thrashing (Animieren von Breite/Höhe statt Transform), falsches Easing oder widersprüchliche Animationen auf demselben Element verursacht wird.
Verwenden Sie Timeline-Scrubbing, um zu sehen, wie Ihre cubic-bezier-Easing-Kurve in der Praxis tatsächlich aussieht. Vergleichen Sie das ease-in- vs. ease-out-Verhalten bei bestimmten Prozentsätzen. Passen Sie Werte an und spielen Sie erneut ab, bis die Bewegung richtig wirkt.
Besuchen Sie eine Website mit beeindruckenden Animationen (Landing Pages, Portfolio-Sites) und inspizieren Sie genau, wie sie gebaut sind. Sehen Sie die @keyframes-Definitionen, Timing-Werte und Element-Targeting, die komplexe Sequenzen zum Laufen bringen.
Überprüfen Sie, ob Hover-Effekte, Ladespinner, Skeleton-Screens und Seitenübergänge alle korrekt funktionieren. Pausieren Sie in mittleren Zuständen, um visuelle Glitches zu überprüfen, wie überlappende Elemente, falscher Z-Index während der Animation oder Content-Reflow.
Identifizieren Sie Animationen, die für Benutzer mit Gleichgewichtsstörungen problematisch sein könnten. Überprüfen Sie, ob prefers-reduced-motion korrekt berücksichtigt wird, indem Sie alle Animationen pausieren und prüfen, ob die Seite voll funktionsfähig bleibt.
Öffnen Sie die schwebende DevSuite Pro-Dock und klicken Sie auf das Symbol des Animations-Inspektors. Das Tool scannt sofort die Seite und erkennt alle laufenden CSS-Animationen und Übergänge.
Ein schwebendes Panel erscheint mit einer Liste aller auf der Seite gefundenen Animationen. Jeder Eintrag zeigt den Animationsnamen, die Dauer, die Easing-Funktion und ob sie gerade läuft oder pausiert ist. Das Zählabzeichen zeigt die Gesamtzahl der erkannten Animationen.
Klicken Sie auf den globalen Pause-Button, um alle Animationen gleichzeitig einzufrieren. Elemente bleiben in ihrem aktuellen mittleren Animationszustand, sodass Sie CSS-Eigenschaften inspizieren, Screenshots machen oder Positionen vergleichen können.
Verwenden Sie den Geschwindigkeitsselektor, um Animationen auf 0,25x zu verlangsamen, um sie genau zu beobachten, oder auf 4x zu beschleunigen, um schnell durch lange Animationen zu radeln. Geschwindigkeitsänderungen werden sofort ohne Neustart angewendet.
Ziehen Sie den Timeline-Scrubber nach links und rechts, um manuell durch die Animation zu navigieren. Die Seite aktualisiert sich in Echtzeit und zeigt Ihnen genau, wie jedes Frame aussieht. Perfekt zum Erkennen von Glitches oder zur Überprüfung von Easing-Kurven.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 39+ Entwickler-Tools für Ihren Browser frei.