Animation Inspector pruža potpunu kontrolu nad svakom CSS animacijom i transition efektom koji se izvodi na bilo kojoj web stranici. Pauzirajte sve animacije odjednom, usporite ih za pregled kadar po kadar, ubrzajte za testiranje performansi ili ručno pomičite kroz timeline — sve iz jednog plutajućeg panela bez otvaranja browser DevToolsa.
CSS animacije mogu biti iznimno teške za debugiranje. Odvijaju se brzo, preklapaju se, a browser DevTools primoravaju vas da pretražujete computed stilove kako biste pronašli animation svojstva. Animation Inspector rješava ovaj problem automatskim otkrivanjem svake @keyframes animacije i CSS transition efekta na stranici, prikazujući ih s punom konfiguracijom (duration, easing, delay, broj iteracija) te vam dajući kontrole reprodukcije koje rade globalno ili po pojedinoj animaciji. Bilo da debugirate treptavi hover efekt, precizno podešavate timing sekvence ulaska na stranicu ili pokušavate razumjeti kako složena animation biblioteka funkcionira ispod haube, ovaj alat stavlja vas u potpunu kontrolu.
Trenutno zaustavite sve animacije na stranici jednim klikom. Sve animacije pauziraju na trenutnoj poziciji — ne resetiraju se na početak. Kliknite play za nastavak točno od mjesta gdje su stale. Neophodno za pregled mid-animation stanja koja je nemoguće uhvatiti golim okom.
Istovremeno podesite brzinu reprodukcije svih animacija. Birajte između 0.25x (četvrtine brzine), 0.5x, 1x (normalno), 2x ili 4x. Pokretanje na 0.25x čini čak i najbržim transition efektima od 200ms lakim za promatranje i debugiranje.
Svaka CSS animacija i transition efekt na stranici automatski se otkrivaju i prikazuju na popisu s mogućnošću pomicanja. Svaki unos prikazuje naziv animacije (ili transition svojstvo), duration, timing function (ease, linear, cubic-bezier), delay, broj iteracija i trenutno stanje izvođenja.
Povucite klizač timelinea za ručno kretanje kroz animaciju kadar po kadar. Pogledajte točno što se događa na 25%, 50% ili bilo kojoj točki animation ciklusa. Stranica se ažurira u stvarnom vremenu dok povlačite.
Pauzirajte, reproducirajte ili podesite brzinu za pojedinačne animacije neovisno jedna o drugoj. Izolirajte jednu animaciju za debugiranje bez ometanja ostalih pokretnih elemenata na stranici.
Kliknite bilo koju animaciju na popisu kako biste vidjeli njenu punu CSS deklaraciju — @keyframes definiciju, rastavljen animation shorthand, computed početna i završna stanja te na koje elemente je primijenjena.
Inšpektor animacij 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-origintranslaterotatescaleskewUsporite animaciju na 0.25x kako biste točno identificirali gdje dolazi do zastoja ili trzanja. Provjerite je li problem uzrokovan layout thrashingom (animiranje width/height umjesto transform), netočnim easingom ili konfliktnim animacijama na istom elementu.
Koristite pomicanje po timelineu kako biste vidjeli kako vaša cubic-bezier easing krivulja stvarno izgleda u praksi. Usporedite ease-in naspram ease-out ponašanja na određenim postocima. Podešavajte vrijednosti i ponavljajte reprodukciju dok se kretanje ne osjeća ispravno.
Posjetite web stranicu s impresivnim animacijama (odredišne stranice, portfolio stranice) i pregledajte točno kako su izgrađene. Pogledajte @keyframes definicije, timing vrijednosti i ciljanje elemenata koji čine složene sekvence funkcionalnima.
Provjerite ponašaju li se hover efekti, loading spinneri, skeleton screens i page transition efekti ispravno. Pauzirajte na mid-stanjima kako biste provjerili vizualne greške poput preklapanja elemenata, netočnog z-indexa tijekom animacije ili reflowinga sadržaja.
Identificirajte animacije koje bi mogle uzrokovati probleme korisnicima s vestibularnim poremećajima. Provjerite je li prefers-reduced-motion pravilno poštovan pauziranjem svih animacija i provjerom ostaje li stranica u potpunosti funkcionalna.
Otvorite DevSuite Pro plutajući dock i kliknite ikonu Animation Inspectora. Alat odmah skenira stranicu i otkriva sve pokrenute CSS animacije i transition efekte.
Pojavljuje se plutajući panel s popisom svake animacije pronađene na stranici. Svaki unos prikazuje naziv animacije, duration, easing funkciju te je li trenutno pokrenuta ili pauzirana. Oznaka broja prikazuje ukupan broj otkrivenih animacija.
Kliknite globalni gumb Pause kako biste istovremeno zamrznuli sve animacije. Elementi ostaju u svom trenutnom mid-animation stanju, što vam omogućuje pregled CSS svojstava, snimanje zaslona ili usporedbu pozicija.
Koristite selektor brzine za usporavanje animacija na 0.25x radi detaljnog promatranja ili ih ubrzajte na 4x za brzo prolaženje kroz dugačke animacije. Promjene brzine primjenjuju se trenutno bez ponovnog pokretanja.
Povucite klizač timelinea lijevo i desno za ručno korakanje kroz animaciju. Stranica se ažurira u stvarnom vremenu prikazujući vam točno kako svaki kadar izgleda. Savršeno za otkrivanje grešaka ili provjeru easing krivulja.
Instalirajte DevSuite Pro besplatno i otključajte 39+ razvojnih alata za svoj preglednik.