To capture an animation, trigger it while the Animations tab is open. Inspect and modify the currently selected animation group. Pause and start an animation from here, or jump to a specific point in the animation. Select an animation group here to inspect and modify it in the Details pane. From here, you can clear all currently captured animation groups, or change the speed of the currently selected animation group. The Animations tab is grouped into four main panes (sections): As a drawer tab, you can use it with any panel or move it to the top of DevTools. Then start typing Show Animations and select the corresponding Drawer panel.īy default, the Animations tab opens up as a tab next to the Console drawer. On Windows, Linux, or ChromeOS: Control+ Shift+ P.Open the Command Menu by pressing one of the following: Select Customize and control DevTools > More tools > Animations. There are two ways to open the Animations tab: In other words, the Animations tab groups together animations triggered in the same script block, but if they're asynchronous, they end up in different groups. The Animations tab predicts related animations based on start time (excluding delays) and groups them side-by-side. # What's an animation group?Īn animation group is a set of animations that appear to be related to each other.Ĭurrently, the web has no real concept of a group animation, so motion designers and developers compose and time individual animations to appear as one coherent visual effect. requestAnimationFrame animations are currently not supported.
The Animations tab supports CSS animations, CSS transitions, and web animations. You can edit the timings of CSS transition and animation easings and configure custom Bezier curves with the Easing Editor in the Elements > Styles pane.
0 kommentar(er)
