DevTools Tips: How to inspect and modify CSS animations
Stay organized with collections
Save and categorize content based on your preferences.
The Chrome DevTools Animations tab is a powerful tool that helps you slow down, replay, adjust CSS animation timings, and see the results right away.
The Animations tab, while open, records animations automatically, conveniently groups them, and lets you:
- Replay and slow down animations to better inspect them.
- Adjust durations, timings, and delays by dragging points in a timeline instead of guessing and setting CSS values manually.
Additionally, you can edit the easing timings and set custom cubic-bezier
curve values with the Easing Editor in the Elements > Styles pane. To learn more, see Edit animation and transition timings with the Easing Editor.
For a more hands-on learning experience, follow the Inspect and modify CSS animation effects guide.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2022-08-11 UTC.
[[["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"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2022-08-11 UTC."],[],[]]