Inspektor animacji zapewnia pełną kontrolę nad każdą animacją CSS i przejściem działającym na dowolnej stronie. Wstrzymaj wszystkie animacje naraz, zwolnij je do inspekcji klatka po klatce, przyspiesz, aby przetestować wydajność, lub ręcznie przewijaj oś czasu — wszystko z jednego pływającego panelu bez dotykania DevTools przeglądarki.
Animacje CSS są znane z trudności debugowania. Dzieją się szybko, nakładają się, a DevTools przeglądarki zmuszają do poszukiwania właściwości animacji w obliczonych stylach. Inspektor animacji rozwiązuje ten problem, automatycznie wykrywając każdą animację @keyframes i przejście CSS na stronie, wymieniając je z pełną konfiguracją (czas trwania, funkcja czasowa, opóźnienie, liczba iteracji) i udostępniając elementy sterujące odtwarzaniem działające globalnie lub dla poszczególnych animacji. Niezależnie od tego, czy debugujesz drgający efekt hover, dopracowujesz czasy sekwencji wejścia strony, czy próbujesz zrozumieć, jak działa złożona biblioteka animacji pod maską, to narzędzie oddaje ci kontrolę.
Natychmiast zamroź każdą animację na stronie jednym kliknięciem. Wszystkie animacje wstrzymują się w bieżącej pozycji — nie resetują się do początku. Kliknij play, aby wznowić dokładnie tam, gdzie się zatrzymały. Niezbędne do sprawdzania stanów pośrednich animacji, których nie da się uchwycić gołym okiem.
Dostosuj prędkość odtwarzania wszystkich animacji jednocześnie. Wybieraj między 0,25x (ćwierć prędkości), 0,5x, 1x (normalna), 2x lub 4x. Uruchomienie przy 0,25x ułatwia obserwowanie i debugowanie nawet najszybszych przejść 200ms.
Każda animacja CSS i przejście na stronie są automatycznie wykrywane i wyświetlane na przewijanej liście. Każdy wpis pokazuje nazwę animacji (lub właściwość przejścia), czas trwania, funkcję czasową (ease, linear, cubic-bezier), opóźnienie, liczbę iteracji i aktualny stan działania.
Przeciągnij suwak osi czasu, aby ręcznie przechodzić przez animację klatka po klatce. Zobacz dokładnie, co dzieje się przy 25%, 50% lub w dowolnym punkcie cyklu animacji. Strona aktualizuje się w czasie rzeczywistym podczas przeciągania.
Wstrzymuj, odtwarzaj lub dostosowuj prędkość poszczególnych animacji niezależnie. Wyodrębnij pojedynczą animację, aby ją debugować, nie rozpraszając się innymi poruszającymi się elementami na stronie.
Kliknij dowolną animację na liście, aby zobaczyć jej pełną deklarację CSS — definicję @keyframes, rozbicie skrótu animation, obliczone stany początkowe i końcowe oraz elementy, do których jest zastosowana.
Inspektor animacji 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-origintranslaterotatescaleskewZwolnij animację do 0,25x, aby dokładnie zidentyfikować, gdzie występuje zacinanie lub drganie. Sprawdź, czy problem jest spowodowany zmianami układu (animowanie width/height zamiast transform), niewłaściwą funkcją czasową czy konfliktowymi animacjami na tym samym elemencie.
Użyj przewijania osi czasu, aby zobaczyć, jak naprawdę wygląda twoja krzywa cubic-bezier w praktyce. Porównaj zachowanie ease-in vs ease-out przy określonych wartościach procentowych. Dostosuj wartości i odtwarzaj ponownie, aż ruch będzie prawidłowy.
Odwiedź stronę z imponującymi animacjami (landing page'e, portfolio) i sprawdź dokładnie, jak są zbudowane. Zobacz definicje @keyframes, wartości czasowe i targetowanie elementów, które sprawiają, że złożone sekwencje działają.
Zweryfikuj, czy efekty hover, spinnery ładowania, ekrany szkieletowe i przejścia stron zachowują się poprawnie. Wstrzymaj w stanach pośrednich, aby sprawdzić błędy wizualne, takie jak nakładanie się elementów, niewłaściwy z-index podczas animacji lub zmianę układu zawartości.
Zidentyfikuj animacje, które mogą powodować problemy u użytkowników z zaburzeniami przedsionkowymi. Sprawdź, czy prefers-reduced-motion jest prawidłowo respektowane, wstrzymując wszystkie animacje i sprawdzając, czy strona pozostaje w pełni funkcjonalna.
Otwórz pływający dok DevSuite Pro i kliknij ikonę Inspektora animacji. Narzędzie natychmiast skanuje stronę i wykrywa wszystkie uruchomione animacje i przejścia CSS.
Pojawia się pływający panel z listą każdej animacji znalezionej na stronie. Każdy wpis pokazuje nazwę animacji, czas trwania, funkcję czasową i to, czy jest obecnie uruchomiona czy wstrzymana. Znaczek licznika pokazuje łączną liczbę wykrytych animacji.
Kliknij globalny przycisk Pauza, aby zamrozić wszystkie animacje jednocześnie. Elementy pozostają w bieżącym stanie pośrednim animacji, pozwalając na inspekcję właściwości CSS, robienie zrzutów ekranu lub porównywanie pozycji.
Użyj selektora prędkości, aby spowolnić animacje do 0,25x w celu szczegółowej obserwacji lub przyspieszyć do 4x, aby szybko przejść przez długie animacje. Zmiany prędkości są stosowane natychmiast bez restartu.
Przeciągaj suwak osi czasu w lewo i w prawo, aby ręcznie przechodzić przez animację. Strona aktualizuje się w czasie rzeczywistym, pokazując dokładnie, jak wygląda każda klatka. Idealne do wykrywania błędów lub weryfikacji krzywych czasowych.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 39 narzędzi programistycznych dla swojej przeglądarki.