Animations can be used to “trace” complex Animations that can be difficult to adjust during front-end development.

Note: The animation inspector supports CSS animations, CSS transitions, and network animations, but does not currently support requestAnimationFrame animations

Panel is introduced

Open the devTools panel in Chrome, click the More button to the left of the X (close button), select “More Tools “, and then click “Animations” in the submenu to bring up the panel:

Or in devTools, type Commond + Shift + p to open the command panel and then type Drawer: Show Animations

This panel can capture the animation on the page and divide the keyframes according to the movement of the animation. We can see at a glance which elements under the keyframe are changing in what style.

As shown in the figure below, the animation check panel consists of the following four parts:

  • 1 Controls. Click the leftmost button to clear all currently captured animation groups; The right button group can change the speed of the currently selected animation group.
  • 2 the Overview. Select the animation group here, and then examine and modify it in the Details pane.
  • 3 the Timeline. Pause and start the animation, or jump to a specific frame in the animation
  • 4 the Details. Checks and modifies the currently selected animation group

Commonly used functions

Animations are commonly used for two main functions

  • Check animation: Check the keyframe of animation and adjust the speed of animation playback
  • Modify animation: Modify the time, delay, duration, or keyframe offset of the animation group for the element animation in the panel

Check the animation

After capturing an animation, you can replay the animation in the following ways:

  • Hover over the thumbnail of the animation in the Overview pane to see a preview of it.
  • Select the animation group from the Overview pane (so that the animation group appears in the Details pane), and then press the replay button. The animation is replayed in the viewport. Click the Animation Speed button to change the preview speed of the currently selected animation group. You can change the current position using the red vertical bar.
  • Click and drag the red vertical bar to drag the viewport animation.

View animation details

After capturing an animation group, click on the Animation group in the Overview pane to view its details. In the Details pane, each animation is displayed on a separate line

Hover over an animation to highlight it in the viewport. Click on the animation and the HTML node for the animation will be automatically selected in the Elements panel:

Understand animation trajectory

  • Solid circles in the animation track represent the beginning and end of the animation, while hollow circles represent keyframes that declare specific rules.
  • If the animation is looping, the dark part on the far left is its definition. The light color on the right indicates repetition. As shown below, parts 2 and 3 represent the repetition of part 1:

  • If two elements have the same animation applied, the animation inspector assigns them the same color. The colors themselves are random and meaningless. As shown, two elementsdiv.eye.left::after 和 div.eye.right::afterThe same animation has been applied (eyes),div.feet::before 和 div.feet::afterThe same goes for elements:

Modify the animation

Animations can be modified using the animation inspector in three ways:

  • Animation duration
  • Keyframe time
  • Start time delay

For the purposes of this section, assume that the screen capture below represents the original animation:

To change the duration of the animation, click and drag the first or last circle

If the animation defines any keyframe rules, these will be represented as white inner circles. Click and drag one of them to change the timing of the keyframe

To add a delay to the animation, click and drag it anywhere outside the circle

reference

  • Inspect Animations by Kayce Basques

This article is published by OpenWrite!