L'Inspector d'animacions t'ofereix un control total sobre cada animació i transició CSS que s'executa en qualsevol pàgina web. Atura totes les animacions alhora, alentint-les per a una inspecció fotograma a fotograma, accelera-les per provar el rendiment o desplaça't per la línia de temps manualment — tot des d'un únic panell flotant sense tocar les DevTools del navegador.
Les animacions CSS poden ser molt difícils de depurar. Passen ràpid, se superposen i les DevTools del navegador t'obliguen a buscar entre els estils computats per trobar les propietats de l'animació. L'Inspector d'animacions ho soluciona detectant automàticament cada animació @keyframes i transició CSS de la pàgina, llistant-les amb la seva configuració completa (durada, suavitzat, retard, recompte d'iteracions) i oferint-te controls de reproducció que funcionen globalment o per animació. Tant si estàs depurant un efecte de sobreposició inestable, ajustant el temps d'una seqüència d'entrada a la pàgina o intentant entendre com funciona una biblioteca d'animacions complexa internament, aquesta eina et dóna el control.
Congela instantàniament cada animació de la pàgina amb un sol clic. Totes les animacions es pausen en la seva posició actual — no es reinicien al principi. Fes clic a reproduir per continuar exactament on es van aturar. Essencial per inspeccionar estats intermedis d'animació que són impossibles de captar a simple vista.
Ajusta la velocitat de reproducció de totes les animacions simultàniament. Tria entre 0,25x (un quart de velocitat), 0,5x, 1x (normal), 2x o 4x. Executar a 0,25x fa que fins i tot les transicions de 200 ms més ràpides siguin fàcils d'observar i depurar.
Cada animació i transició CSS de la pàgina es detecta automàticament i es mostra en una llista amb desplaçament. Cada entrada mostra el nom de l'animació (o propietat de transició), la durada, la funció de temps (ease, linear, cubic-bezier), el retard, el recompte d'iteracions i l'estat d'execució actual.
Arrossega el lliscador de la línia de temps per moure't manualment per una animació fotograma a fotograma. Mira exactament què passa al 25%, al 50% o a qualsevol punt del cicle de l'animació. La pàgina s'actualitza en temps real mentre arrossegues.
Pausa, reprodueix o ajusta la velocitat per a animacions individuals de manera independent. Aïlla una sola animació per depurar-la sense distreure't amb altres elements en moviment a la pàgina.
Fes clic a qualsevol animació de la llista per veure la seva declaració CSS completa — definició @keyframes, desglossament de l'abreviatura de l'animació, estats inicial i final computats i a quins elements s'aplica.
Inspector d'animacions 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-origintranslaterotatescaleskewAlenteix una animació a 0,25x per identificar exactament on es produeix un salt o inestabilitat. Comprova si el problema és causat per un rendiment deficient del disseny (animant amplada/alçada en lloc de transform), un suavitzat incorrecte o animacions conflictives en el mateix element.
Utilitza el desplaçament per la línia de temps per veure com es veu realment la teva corba de suavitzat cubic-bezier a la pràctica. Compara el comportament d'entrada (ease-in) i de sortida (ease-out) en percentatges específics. Ajusta els valors i torna a reproduir fins que el moviment sembli correcte.
Visita un lloc web amb animacions impressionants (pàgines d'aterratge, llocs de portafoli) i inspecciona exactament com estan construïdes. Consulta les definicions @keyframes, els valors de temps i l'orientació dels elements que fan que les seqüències complexes funcionin.
Verifica que els efectes de sobreposició, els indicadors de càrrega, les pantalles d'esquelet i les transicions de pàgina funcionin correctament. Pausa en estats intermedis per comprovar si hi ha errors visuals com superposició d'elements, z-index incorrecte durant l'animació o reflux de contingut.
Identifica les animacions que podrien causar problemes als usuaris amb trastorns vestibulars. Comprova si es respecta correctament prefers-reduced-motion pausant totes les animacions i veient si la pàgina continua sent totalment funcional.
Obre el tauler flotant de DevSuite Pro i fes clic a la icona de l'Inspector d'animacions. L'eina escaneja immediatament la pàgina i detecta totes les animacions i transicions CSS en execució.
Apareix un panell flotant que llista cada animació trobada a la pàgina. Cada entrada mostra el nom de l'animació, la durada, la funció de suavitzat i si s'està executant o està en pausa. La insígnia de recompte mostra el nombre total d'animacions detectades.
Fes clic al botó global de pausa per congelar totes les animacions simultàniament. Els elements romanen en el seu estat intermedi d'animació actual, cosa que et permet inspeccionar les propietats CSS, fer captures de pantalla o comparar posicions.
Utilitza el selector de velocitat per alentir les animacions a 0,25x per a una observació detallada, o accelera-les a 4x per recórrer ràpidament animacions llargues. Els canvis de velocitat s'apliquen a l'instant sense reiniciar.
Arrossega el lliscador de la línia de temps a l'esquerra i a la dreta per recórrer manualment l'animació. La pàgina s'actualitza en temps real, mostrant-te exactament com es veu cada fotograma. Perfecte per detectar errors o verificar les corbes de suavitzat.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 39 eines de desenvolupador per al teu navegador.