Debugging: Bezier Curve Editor

If we’re using CSS keyframes in our animation, both Chrome and Firefox's devtools also have a tool to edit the curves of our animation dynamically using Lea Verou’s cubic-bezier visualization.

This ability to modify the curves dynamically within the browser is extremely helpful because we no longer have to go back and forth between the editor and the browser to tweak the bezier curves to get the right timing. After modifying the bezier curve, we can use the “replay” button on the “Animations” tab to replay the animation with the updated bezier curve. Access this feature by clicking on the squiggly line icon on the animation property of our element.

The knobs attached to the lines on the bezier curve editor are draggable, vertically and horizontally, to edit the curve of the line, which will update the cubic-bezier function. We can see a quick visualization of what the timing function looks like in the bezier curve editor, which shows how the animation will accelerate/decelerate over time.

Chrome

Note: Chrome only supports CSS animations, CSS transitions, and Web Animations. You wouldn’t be able to use this if you were using requestAnimationFrame for your animation.

Open the "Elements" tab on Chrome DevTools and select the element with the animation. Hover on the animation property in the "Styles" tab. This should display a popup with a bezier curve editor for the selected animation.