DevTools-tips: CSS-animaties inspecteren en wijzigen
bookmark_borderbookmark
Stay organized with collections
Save and categorize content based on your preferences.
Sofia Emelianova
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.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Translation issue","translationIssue","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2022-08-11 UTC."],[],[]]