Debugger voor animaties en transities

Chrome DevTools → More tools → Animations (of Cmd+Shift+P → "Animations"). Het paneel legt CSS-transities en -animaties vast terwijl ze worden uitgevoerd en toont ze op een tijdlijn waarop je de afspeelpositie kunt verslepen, met regelaars voor afspelen en afspeelsnelheid.

Het Animations-paneel biedt afspeelsnelheden van 10%, 25% en 100%. Vertragen tot 10% maakt timingproblemen, problemen met easingcurven en haperingen zichtbaar die op volledige snelheid onzichtbaar zijn — essentieel voor het debuggen van complexe choreografie met meerdere elementen.

Elke vastgelegde animatie verschijnt als een rij met de naam van het element, een balk voor de duur, een vertraging en het aantal iteraties. De ruitvormige keyframes laten wijzigingen in timingfuncties zien. Als je de muis over een rij beweegt, wordt het element in de viewport gemarkeerd.

Sleep de afspeelkop in het Animation-paneel naar een willekeurig punt in de animatietijdlijn. De pagina geeft dat beeld exact weer — bevries elke animatie op elk moment om tegelijk de posities, dekking en transform-waarden van elementen in het Computed-paneel te inspecteren.

Klik op een animatierij om deze uit te vouwen. Afzonderlijke keyframes verschijnen als ruitjes op de tijdlijn. Klik op een keyframe-ruitje om naar de bijbehorende regel met @keyframes in het Styles-paneel te springen en deze met livevoorbeeld te bewerken.

Chrome DevTools toont cubic-bezier-curven voor elk animatiesegment. Klik op het curvepictogram naast een timingfunctie in het Styles-paneel om de cubic-bezier-editor te openen — versleep de controlepunten en bekijk de animatie in realtime veranderen.

CSS-transities worden in het Animations-paneel vastgelegd wanneer ze worden geactiveerd. Activeer een hover of schakel een klasse om, waarna het paneel de transitie vastlegt. Inspecteer de duur, vertraging en timingfunctie — handig wanneer transities niet goed aanvoelen maar hun oorsprong onduidelijk is.

Als Rendering → Layer Borders is ingeschakeld (DevTools → Rendering), tonen geanimeerde elementen op hun eigen GPU-laag groene randen. Niet-gecompositeerde animaties (animaties van width, top of color) tonen geen laagrand en kunnen paint flashing veroorzaken — zichtbaar wanneer Paint Flashing is ingeschakeld.

Neem tijdens een animatie een Performance-profiel op. Zoek in de vlamgrafiek naar lange Paint- of Layout-gebeurtenissen die samenvallen met animatieframes. Compositor-only-animaties (transform/opacity) verschijnen alleen als gebeurtenissen van het type Composite Layer — snel en zonder paint.

JS-animaties die rAF gebruiken, verschijnen in het Performance-paneel onder de sectie Frames. Lange rAF-callbacks van meer dan 16 ms veroorzaken verloren frames. Analyseer de callback om dure berekeningen te vinden en verplaats die indien mogelijk van de hoofdthread naar Web Workers.

De Web Animations API (element.animate()) en bibliotheken op basis van WAAPI verschijnen naast CSS-animaties in het Animations-paneel. Het paneel kan de herkomst niet onderscheiden — CSS versus WAAPI — maar de bediening voor tijdlijnnavigatie en vertraagde weergave werkt voor beide.

Het Animations-paneel van DevTools legt CSS-transities en -animaties vast met een tijdlijn waarvan je de afspeelpositie kunt verslepen, variabele afspeelsnelheid, inspectie van keyframes en bewerking van cubic-bezier-curven. In combinatie met prestatieprofilering en laagvisualisatie biedt het uitgebreide hulpmiddelen voor het debuggen van zowel de werking als de prestaties van CSS-animaties.