Inspecting and Modifying CSS animations
In the animation tool all possible animations groups will be present select the one that you can to inspect.
At the top of the tool you get buttons to control the selected animation.
- Clear Button: The button clears all the animation information of the site.
- Pause Button: This button pause or resume the selected animations.
- Animation Speed options: The speed options: 100%, 25%, and 10% changes the speed of the selected animation.
Delay Modifications: The animation that are displayed are draggable, drag it to change the delay.
Duration Modification: The end dots can be changed to change the duration of the animation.
Keyframe Timings Modification: The empty dot present in the center can be used to change the keyframe timing.
Inspecting and Modifying CSS animations in Microsoft Edge Browser
To inspect and modify CSS animations you can use the Animation Tool provided in the DevTools in Edge. The tool allows developers to inspect the animations and modify them. You get to replay or preview animations and various other options to change properties such as time, delay, etc.
Table of Content
- Feature of Animation Tool
- Benefits of Animation Tool
- Locating the Animation Tool in Edge
- Inspecting and Modifying CSS animations
- Conclusion