Using the Animation Inspector in Chrome Developer Tools
The next time you create regular CSS3-based animations, it may be helpful to go to the Chrome developer tools and take advantage of the animation check and tweak features. In this brief article, we’ll tell you what animation tools are available in Chrome, how to access them, and how they can help you.
If you want to test your CSS3 animations using these tools, you can use ready-made code from our course: 10 CSS3 Projects: interface and layout .
Here is the full version of the page.
On the page with running CSS3 animation, first open the “Chrome Developer Tools” by going to View> Developer> Developer tools. Alternatively, you can use the keyboard shortcut: F12 or CTRL + SHIFT + I.
')
When the developer tools are open, go to the menu indicated by the three vertical dots in the upper right corner, then select More tools> Animations, as shown below:
When you first open the animation tab, you will not see any content related to your animation, you will simply see the message Listening for animations ... The reason for this is that the tab earned tool must already be open when the page loads for the first time.
To make the panel read information about your animations, refresh the page and you will see the following:
The small color icon in the upper left corner is an animation of the elements of your page. Click this icon to open the animation check tools:
As the animation plays, you will see a red playback cursor moving along the timeline. This cursor can be moved to the right place with the mouse.
Each line of the interface is a separate element of animation on the page. You may notice that each line has a section with a darker saturated color. It shows the length of the animation, and the lighter segments that follow it are a repeat animation.
You will also see several small circles along each line of the animation. They correspond to keyframes of animation. Dark circles represent the beginning and end of the animation, and hollow circles represent intermediate key frames between them.
Intermediate keyframes (keyframes between the beginning and end of each animation cycle) on each line can be dragged to different positions, and as they move, you will see how the animation time changes in the browser window. This is a good tool for experimenting with what percentage should fall on each intermediate keyframe.
However, the difficulty lies in the fact that you will not see code updates on the Styles tab during these experiments. Instead, when you receive your intermediate keyframes placed at the correct point, you can manually determine what percentage value to use for the keyframe.
Place the playhead directly above the keyframe in question and you will see a time stamp in the upper left corner of the panel telling you how far in the animation you are in seconds. Then you can figure out what percentage this time is the total duration of the animation. In the example below, the playback cursor is about 1 second 2-second animation, so we know that this keyframe is 50%.
You can make other changes on the Animations tab that will update your code on the Styles tab so you can see exactly what values ​​to make to your CSS. The first is the delay before the animation starts playing, and the second is its duration.
To apply a delay before the animation starts playing, hover the mouse over its line until you see the cursor in the shape of a hand, and then drag it horizontally. You will see an update of the delay value on the Styles tab:
To change the duration of the animation, hover the cursor over your last keyframe until you see the bi-directional cursor, and then drag it horizontally. Again, the value will be visible update on the Styles tab.
You can also use the Chrome developer tools to change the speed curve that controls the animation time. Start by checking the element to which the animation is applied. To the left of the currently specified timing function, you will see a small icon with a “tilde”. Click on it to open the bezier curve editor:
A window will open showing a Bezier curve that displays the current timing function. Here you can select an existing preset by clicking one of the thumbnails on the left, or you can drag the markers of the main curve image to create a custom bezier curve value, which you can then copy into your CSS:
As you change, you will see a small purple ball moving from left to right at the top of the editor, displaying the current changes in your timing function.
Another useful feature is the ability to visualize the layers used in your animation, including the ability to rotate the specified visualization and view it from different points of view in order to better understand how everything works.
To open the Layers panel , go to the Chrome Dev Tools menu and select More tools> Layers.
When the Layers tab is open, select the Rotate mode tool in the upper left corner:
Now you can use this tool to rotate the layer render to any angle you need to better see how parts of your animation work:
Let's take a quick look at the Chrome animation tools:
Sometimes creating perfect animation can be a very precise and delicate process. These tools can provide much-needed information about your animations, as well as real-time feedback to help you achieve perfection.
If you want to test your CSS3 animations using these tools, you can use ready-made code from our course: 10 CSS3 Projects: interface and layout .
Here is the full version of the page.
Opening the Animations Tab
On the page with running CSS3 animation, first open the “Chrome Developer Tools” by going to View> Developer> Developer tools. Alternatively, you can use the keyboard shortcut: F12 or CTRL + SHIFT + I.
')
When the developer tools are open, go to the menu indicated by the three vertical dots in the upper right corner, then select More tools> Animations, as shown below:
When you first open the animation tab, you will not see any content related to your animation, you will simply see the message Listening for animations ... The reason for this is that the tab earned tool must already be open when the page loads for the first time.
To make the panel read information about your animations, refresh the page and you will see the following:
The small color icon in the upper left corner is an animation of the elements of your page. Click this icon to open the animation check tools:
Playback cursor and keyframes
As the animation plays, you will see a red playback cursor moving along the timeline. This cursor can be moved to the right place with the mouse.
Each line of the interface is a separate element of animation on the page. You may notice that each line has a section with a darker saturated color. It shows the length of the animation, and the lighter segments that follow it are a repeat animation.
You will also see several small circles along each line of the animation. They correspond to keyframes of animation. Dark circles represent the beginning and end of the animation, and hollow circles represent intermediate key frames between them.
Intermediate keyframes
Intermediate keyframes (keyframes between the beginning and end of each animation cycle) on each line can be dragged to different positions, and as they move, you will see how the animation time changes in the browser window. This is a good tool for experimenting with what percentage should fall on each intermediate keyframe.
However, the difficulty lies in the fact that you will not see code updates on the Styles tab during these experiments. Instead, when you receive your intermediate keyframes placed at the correct point, you can manually determine what percentage value to use for the keyframe.
Place the playhead directly above the keyframe in question and you will see a time stamp in the upper left corner of the panel telling you how far in the animation you are in seconds. Then you can figure out what percentage this time is the total duration of the animation. In the example below, the playback cursor is about 1 second 2-second animation, so we know that this keyframe is 50%.
Delay and duration of animation
You can make other changes on the Animations tab that will update your code on the Styles tab so you can see exactly what values ​​to make to your CSS. The first is the delay before the animation starts playing, and the second is its duration.
To apply a delay before the animation starts playing, hover the mouse over its line until you see the cursor in the shape of a hand, and then drag it horizontally. You will see an update of the delay value on the Styles tab:
To change the duration of the animation, hover the cursor over your last keyframe until you see the bi-directional cursor, and then drag it horizontally. Again, the value will be visible update on the Styles tab.
Animation timing function
You can also use the Chrome developer tools to change the speed curve that controls the animation time. Start by checking the element to which the animation is applied. To the left of the currently specified timing function, you will see a small icon with a “tilde”. Click on it to open the bezier curve editor:
A window will open showing a Bezier curve that displays the current timing function. Here you can select an existing preset by clicking one of the thumbnails on the left, or you can drag the markers of the main curve image to create a custom bezier curve value, which you can then copy into your CSS:
As you change, you will see a small purple ball moving from left to right at the top of the editor, displaying the current changes in your timing function.
Rendering of rotating layers
Another useful feature is the ability to visualize the layers used in your animation, including the ability to rotate the specified visualization and view it from different points of view in order to better understand how everything works.
To open the Layers panel , go to the Chrome Dev Tools menu and select More tools> Layers.
When the Layers tab is open, select the Rotate mode tool in the upper left corner:
Now you can use this tool to rotate the layer render to any angle you need to better see how parts of your animation work:
Completion
Let's take a quick look at the Chrome animation tools:
- Open the animation tools by first opening the Chrome Dev Tools, then from the dev tools menu, select More tools> Animations.
- The Animations panel must be open when the page loads to display information about the animation — refresh the page to achieve this.
- Click the thumbnail of a small color graph to view information about the animation.
- Each line represents an animation.
- The filled circles represent the starting and ending keyframes.
- Hollow circles represent intermediate key frames.
- Intermediate keyframes can be moved, but you will not see the corresponding code update on the Styles tab; instead, manually calculate the percentage point on which they fall.
- Change the delay value of the animation by pointing it over a line until you see the hand cursor, and then drag it horizontally.
- Change the duration of the animation by hovering over its last keyframe until you see the cursor of the double-contour arrow, and then drag it horizontally.
- On the Styles tab, click the icon to the left of the existing timing function to open the bezier curve editor.
- Choose from the presets of the time function settings or create your own by changing the image of the main curve.
- Open the Layers panel by going to the Chrome Developer Tools menu and selecting More tools> Layers.
- In this panel, use Rotate mode to view the layers of your animation from any angle.
Sometimes creating perfect animation can be a very precise and delicate process. These tools can provide much-needed information about your animations, as well as real-time feedback to help you achieve perfection.
Source: https://habr.com/ru/post/427657/
All Articles