Het Chrome DevTools-tabblad Animaties is een krachtig hulpmiddel waarmee u de timing van CSS-animaties kunt vertragen, opnieuw kunt afspelen, aanpassen en meteen de resultaten kunt zien.
Als het tabblad Animaties geopend is, worden animaties automatisch opgenomen, gegroepeerd en kunt u:
- Speel animaties opnieuw af en vertraag ze om ze beter te kunnen inspecteren.
- Pas de duur, timing en vertragingen aan door punten in een tijdlijn te slepen in plaats van te gokken en CSS-waarden handmatig in te stellen.
Bovendien kunt u de easing-timings bewerken en aangepaste cubic-bezier
-curvewaarden instellen met de easing-editor in het deelvenster Elementen > Stijlen . Zie Animatie- en overgangstijden bewerken met de Easing Editor voor meer informatie.
Voor een meer praktische leerervaring volgt u de handleiding CSS-animatie-effecten inspecteren en aanpassen .