Feilsøking av animasjoner og overganger

Chrome DevTools → More tools → Animations (eller Cmd+Shift+P → "Animations"). Panelet registrerer CSS-overganger og -animasjoner mens de kjører, og viser dem på en tidslinje med kontroller for skrubbing og avspillingshastighet.

Animations-panelet tilbyr avspillingshastigheter på 10 %, 25 % og 100 %. Når du senker hastigheten til 10 %, blir tidsproblemer, problemer med easing-kurver og hakking synlige – problemer som ikke kan ses i full hastighet. Dette er viktig ved feilsøking av komplekse animasjonsforløp med flere elementer.

Hver registrerte animasjon vises som en rad med elementnavn, varighetslinje, forsinkelsesforskyvning og antall gjentakelser. Keyframe-diamantene viser endringer i timing-funksjonen. Når du holder pekeren over en rad, fremheves elementet i visningsområdet.

Dra avspillingsmarkøren i Animation-panelet til et hvilket som helst punkt på animasjonens tidslinje. Siden gjengir den aktuelle rammen nøyaktig – frys en animasjon når som helst for samtidig å undersøke elementposisjoner, opasitet og transformasjonsverdier i Computed-panelet.

Klikk på en animasjonsrad for å utvide den. De enkelte keyframene vises som diamanter på tidslinjen. Klikk på en keyframe-diamant for å gå til den tilsvarende @keyframes-regelen i Styles-panelet og redigere den med direkte forhåndsvisning.

Chrome DevTools viser cubic-bezier-kurver for hvert animasjonssegment. Klikk på kurveikonet ved siden av en timing-funksjon i Styles-panelet for å åpne cubic-bezier-redigeringsverktøyet. Dra i kontrollpunktene og se animasjonen oppdateres i sanntid.

CSS-overganger registreres i Animations-panelet når de utløses. Utløs en hover eller en klassetoggle, så registrerer panelet overgangen. Undersøk varigheten, forsinkelsen og timing-funksjonen – nyttig når overganger føles feil, men det er uklart hvor de kommer fra.

Når Layer Borders er aktivert under Rendering (DevTools → Rendering), vises animerte elementer på sitt eget GPU-lag med grønne rammer. Animasjoner som ikke kompositoriseres (width, top, color), viser ingen lagramme og kan føre til paint flashing – synlig når Paint Flashing er aktivert.

Ta opp en Performance-profil under animasjonen. Se etter lange Paint- eller Layout-hendelser i flammegrafen som sammenfaller med animasjonsrammer. Animasjoner som bare kjøres av kompositoren (transform/opacity), vises bare som Composite Layer-hendelser – raske og uten paint.

JavaScript-animasjoner som bruker rAF, vises i Performance-panelet under Frames-delen. Lange rAF-tilbakekall som varer mer enn 16 ms, fører til rammefall. Profiler tilbakekallet for å finne kostbare beregninger, og flytt dem om mulig bort fra hovedtråden ved hjelp av Web Workers.

Web Animations API (element.animate()) og WAAPI-baserte biblioteker vises i Animations-panelet sammen med CSS-animasjoner. Panelet kan ikke skille mellom kilden – CSS eller WAAPI – men skrubbing og saktefilm fungerer for begge.

Animations-panelet i DevTools registrerer CSS-overganger og -animasjoner med en tidslinje du kan skrubbe, variabel avspillingshastighet, inspeksjon av keyframes og redigering av cubic-bezier-kurver. Sammen med ytelsesprofilering og visualisering av lag gir det omfattende verktøy for å feilsøke både korrekthet og ytelse i CSS-animasjoner.