How to Use the Animations Tool in Microsoft Edge DevTools to Inspect and Debug CSS Keyframes

Fluid user interface animations enhance visual polish, but fine-tuning rapid CSS transitions or multi-stage keyframe sequences can be difficult when viewing them in real time. Microsoft Edge DevTools includes a dedicated Animations tool that allows developers to record, slow down, replay, scrub, and modify CSS transitions, CSS animations, and Web Animations API (WAAPI) streams directly in the browser.

By capturing interactive motion into visual timeline tracks, you can isolate frame drops, inspect animation delays, and adjust bezier timing curves without repeatedly recompiling frontend code.

Opening the Animations Tool

The Animations drawer is not enabled by default in the primary DevTools interface. Follow these steps to access it:

1. Open Microsoft Edge and navigate to the webpage containing the animations you want to inspect.
2. Press F12 or right-click anywhere on the page and select Inspect.
3. Press Ctrl + Shift + P (Windows) or Cmd + Shift + P (macOS) to open the Command Menu.
4. Type Animations and select Show Animations from the drawer options.
5. Alternatively, click the More tools icon (represented by three dots or a plus sign next to the Console tab in the lower drawer) and select Animations.

Core Features of the Animations Drawer

When triggered on a webpage, the Animations tool captures animations into individual group cards displayed along the top bar:

Tool Feature	Functionality	Primary Use Case
Playback Speed Controls	Offers 100%, 25%, and 10% speed modifiers alongside pause and replay.	Slowing down rapid micro-interactions to spot rendering glitches.
Timeline Scrubber	Red vertical playhead that can be dragged back and forth across the timeline.	Inspecting intermediate frame states and simultaneous element coordination.
Animation Group Cards	Screenshots grouped by event triggers (e.g., hover, button click).	Switching between different interactive states and independent timelines.
Keyframe Timeline Tracks	Displays individual DOM nodes with coloured duration bars and keyframe circles.	Modifying animation delays and duration by dragging track endpoints.

Inspecting and Modifying Timing Parameters

Once an animation group is captured, you can manipulate key properties interactively:

1. Capture the Motion: Trigger the interaction on your page (such as hovering over a navigation dropdown or clicking a modal trigger). Edge automatically records the group into the drawer.
2. Select the Group Card: Click the thumbnail preview to populate the timeline track view below.
3. Slow Down Playback: Click 10% in the top-left corner. DevTools will immediately reduce execution speed across all running animations on the page.
4. Adjust Duration and Delay:
   • Hover over the left edge of an element track until a double-sided arrow appears, then drag to adjust the animation-delay.
   • Drag the right end circle to lengthen or shorten the animation-duration.
5. Edit Keyframe Positions: Drag any internal circular keyframe marker along the track to rebalance intermediate percentage stops (e.g., shifting a 50% midpoint to 75%).

Fine-Tuning Cubic-Bezier Curves

In addition to timeline dragging, Edge DevTools integrates directly with the CSS Styles pane:

1. Click any animated DOM element in the timeline track to focus it in the Elements panel.
2. In the Styles tab, locate the transition-timing-function or animation-timing-function rule.
3. Click the miniature bezier curve icon beside the curve definition (such as cubic-bezier(0.42, 0, 0.58, 1)).
4. Use the visual Cubic Bezier Editor to pull control handles and test bounce, ease-in, or custom acceleration profiles in real time.

Frequently Asked Questions

Why did my animation not appear in the Animations drawer?

Edge DevTools captures animations that execute while the Animations panel is actively open. If the animation completed prior to opening the drawer, trigger the event again or refresh the page with the drawer active.

Can the Animations tool inspect canvas or WebGL animations?

No. The Animations tool inspects CSS transitions, CSS keyframe animations, and Web Animations API calls linked to standard DOM nodes. For WebGL and canvas rendering, use the Performance or 3D View panels.