Animationsinspektoren giver dig fuld kontrol over alle CSS-animationer og overgange på enhver webside. Sæt alle animationer på pause på én gang, sænk dem til billede-for-billede-inspektion, speedup dem for at teste ydeevne, eller skrub manuelt gennem tidslinjen — alt fra et enkelt flydende panel uden at røre browser-DevTools.
CSS-animationer kan være notorisk svære at fejlsøge. De sker hurtigt, de overlapper, og browser-DevTools tvinger dig til at søge gennem beregnede typografier for at finde animationsegenskaber. Animationsinspektoren løser dette ved automatisk at registrere alle @keyframes-animationer og CSS-overgange på siden, liste dem med fuld konfiguration (varighed, easing, forsinkelse, iterationsantal) og give dig afspilningskontroller, der fungerer globalt eller pr. animation. Uanset om du fejlsøger en rykkende hovereffekt, finjusterer timingen af en sideindgangssekvens eller forsøger at forstå, hvordan et komplekst animationsbibliotek fungerer under motorhjelmen, sætter dette værktøj dig i kontrol.
Frys øjeblikkeligt alle animationer på siden med et enkelt klik. Alle animationer sættes på pause ved deres aktuelle position — ikke nulstillet til start. Klik på afspil for at fortsætte præcis derfra, hvor de stoppede. Afgørende for inspektion af midtanimationstilstande, der er umulige at fange med det blotte øje.
Juster afspilningshastigheden for alle animationer samtidigt. Vælg mellem 0,25x (kvart hastighed), 0,5x, 1x (normal), 2x eller 4x. Kørsel ved 0,25x gør selv de hurtigste 200 ms-overgange lette at observere og fejlsøge.
Alle CSS-animationer og overgange på siden registreres automatisk og vises i en rulleliste. Hvert element viser animationsnavnet (eller overgangsegenskaben), varighed, timingfunktion (ease, linear, cubic-bezier), forsinkelse, iterationsantal og den aktuelle kørselstilstand.
Træk tidslinjeskrubberen for manuelt at bevæge dig gennem en animation billede for billede. Se præcis, hvad der sker ved 25 %, 50 % eller ethvert punkt i animationscyklussen. Siden opdateres i realtid, mens du trækker.
Sæt på pause, afspil eller juster hastighed for individuelle animationer uafhængigt. Isoler en enkelt animation for at fejlsøge den uden at blive distraheret af andre bevægende elementer på siden.
Klik på en animation i listen for at se dens fulde CSS-erklæring — @keyframes-definition, animationsforkortet nedbrydning, beregnede start- og sluttilstande og hvilke elementer den er anvendt på.
Animationsinspektor 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-origintranslaterotatescaleskewSænk en animation til 0,25x for at identificere præcis, hvor en stammen eller rykning opstår. Kontroller, om problemet skyldes layoutthrashing (animation af bredde/højde i stedet for transform), forkert easing eller modstridende animationer på det samme element.
Brug tidslinjeskrubning til at se, hvordan din cubic-bezier easing-kurve faktisk ser ud i praksis. Sammenlign ease-in vs. ease-out-adfærd ved specifikke procentsatser. Juster værdier og afspil igen, indtil bevægelsen føles rigtig.
Besøg et websted med imponerende animationer (landingssider, porteføljesider) og inspicér præcis, hvordan de er bygget. Se @keyframes-definitioner, timingværdier og elementmålretning, der får komplekse sekvenser til at fungere.
Verificér, at hovereffekter, indlæsningsspinnere, skeletskærme og sideovergange alle fungerer korrekt. Sæt på pause ved midttilstande for at kontrollere for visuelle fejl som overlappende elementer, forkert z-indeks under animation eller indholdsomlægning.
Identificér animationer, der kan forårsage problemer for brugere med vestibulære forstyrrelser. Kontroller, om prefers-reduced-motion overholdes korrekt ved at sætte alle animationer på pause og se, om siden forbliver fuldt funktionel.
Åbn den flydende dock i DevSuite Pro og klik på ikonet Animationsinspektor. Værktøjet scanner straks siden og registrerer alle kørende CSS-animationer og overgange.
Et flydende panel vises med en liste over alle animationer fundet på siden. Hvert element viser animationsnavnet, varighed, easing-funktion og om det kører eller er sat på pause. Tællingsbadgen viser det samlede antal registrerede animationer.
Klik på den globale Pause-knap for at fryse alle animationer samtidigt. Elementer forbliver i deres nuværende midtanimationstilstand, så du kan inspicere CSS-egenskaber, tage skærmbilleder eller sammenligne positioner.
Brug hastighedsvælgeren til at sænke animationer til 0,25x for detaljeret observation eller speedup dem til 4x for hurtigt at cykle gennem lange animationer. Hastighedsændringer gælder øjeblikkeligt uden genstart.
Træk tidslinjeskrubberen til venstre og højre for manuelt at gennemgå animationen. Siden opdateres i realtid og viser dig præcist, hvad hvert billede ser ud som. Perfekt til at spotte fejl eller verificere easing-kurver.
Installera DevSuite Pro gratis och lås upp 39+ utvecklarverktyg för din webbläsare.