Animation Inspector îți oferă control complet asupra fiecărei animații CSS și transition care rulează pe orice pagină web. Oprește toate animațiile dintr-o singură apăsare, încetinește-le pentru inspecție cadru cu cadru, accelerează-le pentru testarea performanței sau parcurge manual timeline-ul — totul dintr-un singur panou flotant, fără a deschide DevTools-ul browserului.
Animațiile CSS pot fi extrem de dificil de depanare. Se produc rapid, se suprapun, iar DevTools-ul browserului te obligă să cauți prin stiluri calculate pentru a găsi proprietățile de animație. Animation Inspector rezolvă această problemă detectând automat fiecare animație @keyframes și fiecare CSS transition de pe pagină, afișându-le cu configurația completă (durată, easing, delay, număr de iterații) și oferindu-ți controale de redare care funcționează global sau per animație. Indiferent că depanezi un efect hover tremurat, ajustezi timing-ul unei secvențe de intrare pe pagină sau vrei să înțelegi cum funcționează o bibliotecă complexă de animații, acest instrument îți pune toate datele la dispoziție.
Îngheață instantaneu fiecare animație de pe pagină cu un singur clic. Toate animațiile se opresc în poziția curentă — nu revin la început. Apasă din nou pentru a relua de exact acolo unde s-au oprit. Esențial pentru inspectarea stărilor din mijlocul animației, imposibil de surprins cu ochiul liber.
Ajustează viteza de redare a tuturor animațiilor simultan. Alege din 0.25x (sfert din viteză), 0.5x, 1x (normal), 2x sau 4x. La 0.25x, chiar și cele mai rapide transition-uri de 200ms devin ușor de observat și depanare.
Fiecare animație CSS și transition de pe pagină este detectată automat și afișată într-o listă cu scroll. Fiecare intrare arată numele animației (sau proprietatea transition), durata, funcția de timing (ease, linear, cubic-bezier), delay-ul, numărul de iterații și starea curentă de rulare.
Trage cursorul de pe timeline pentru a naviga manual prin animație cadru cu cadru. Vezi exact ce se întâmplă la 25%, 50% sau orice alt punct din ciclul de animație. Pagina se actualizează în timp real pe măsură ce tragi.
Oprește, redă sau ajustează viteza pentru fiecare animație individual. Izolează o singură animație pentru a o depana fără a fi distras de alte elemente în mișcare de pe pagină.
Apasă pe orice animație din listă pentru a vedea declarația CSS completă — definiția @keyframes, desfacerea shorthand-ului de animație, stările calculate de start și final, precum și elementele la care este aplicată.
Ispettore animazioni 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-origintranslaterotatescaleskewÎncetinește o animație la 0.25x pentru a identifica exact unde apare un blocaj sau un sacadat. Verifică dacă problema este cauzată de layout thrashing (animarea width/height în loc de transform), easing incorect sau animații conflictuale pe același element.
Folosește parcurgerea manuală a timeline-ului pentru a vedea cum arată în practică curba ta cubic-bezier. Compară comportamentul ease-in față de ease-out la procente specifice. Ajustează valorile și reluează redarea până când mișcarea pare corectă.
Vizitează un site cu animații impresionante (pagini de prezentare, site-uri de portofoliu) și inspectează exact cum sunt construite. Vezi definițiile @keyframes, valorile de timing și elementele vizate care fac posibile secvențele complexe.
Verifică că efectele hover, animațiile de încărcare, ecranele skeleton și transition-urile de pagină se comportă corect. Oprește animația la stări intermediare pentru a detecta erori vizuale precum suprapunerea elementelor, z-index incorect în timpul animației sau reflow-ul conținutului.
Identifică animațiile care ar putea cauza probleme utilizatorilor cu tulburări vestibulare. Verifică dacă prefers-reduced-motion este respectat corespunzător prin oprirea tuturor animațiilor și asigurarea că pagina rămâne complet funcțională.
Deschide dock-ul flotant DevSuite Pro și apasă pe iconița Animation Inspector. Instrumentul scanează imediat pagina și detectează toate animațiile CSS și transition-urile active.
Apare un panou flotant care listează fiecare animație găsită pe pagină. Fiecare intrare afișează numele animației, durata, funcția de easing și dacă rulează sau este oprită în acel moment. Indicatorul de număr arată totalul animațiilor detectate.
Apasă butonul global Pauză pentru a îngheța toate animațiile simultan. Elementele rămân în starea curentă din mijlocul animației, permițându-ți să inspectezi proprietăți CSS, să faci capturi de ecran sau să compari poziții.
Folosește selectorul de viteză pentru a încetini animațiile la 0.25x pentru observare detaliată sau pentru a le accelera la 4x pentru a parcurge rapid animațiile lungi. Modificările de viteză se aplică instant, fără a reporni animațiile.
Trage cursorul de pe timeline la stânga și la dreapta pentru a avansa manual prin animație. Pagina se actualizează în timp real, arătându-ți exact cum arată fiecare cadru. Perfect pentru depistarea erorilor vizuale sau verificarea curbelor de easing.
Instalează DevSuite Pro gratuit și deblochează peste 39 de instrumente pentru dezvoltatori în browserul tău.