Shulou(Shulou.com)06/03 Report--

This article shows you the impact of the choice of css attributes on animation performance, the content is concise and easy to understand, it will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Now the proportion of mobile phones is getting higher and higher, a variety of cool pages emerge one after another, these special effects are inseparable from css animation. When it comes to css animation, the mainstream situation is nothing more than these two categories: displacement and deformation. The purpose of this time is to simply and roughly say that what css attributes we should use to draw animation can effectively improve the performance of the browser in the rendering and rendering process.

Left and transform are used to translate the displacement of 500px to the right in 2 seconds, respectively. The code is as follows:

JavaScript Code copies content to the clipboard

.box-ps,.box-tf {position:absolute;top:0;left:0;width:100px;height:100px;background-color:red;}. Box-ps {- webkit-animation:box-ps 2s linear;}. Box-tf {- webkit-animation:box-tf 2s linear;} @-webkit-keyframes box-ps {0% {left:0;} 100% {left:500px } @-webkit-keyframes box-tf {0% {- webkit-transform:translate (0PX 0);} 100% {- webkit-transform:translate (500pxPower0);}}

Then the following results are obtained under chrome. The first is a screenshot using left, and the second is a screenshot using transform:

Screenshot of transform

Obviously, in frame mode, we can see that the number of frames of left is lower than that of transform, and in terms of rendering and rendering, left is much longer than transform. Seeing this, I believe you have already reached a conclusion in your mind.

Let's use the show paint rectangles of chrome to observe the difference between the rendered and drawn areas during animation. The first is a screenshot using left, and the second is a screenshot using transform:

Screenshot of transform

We can see that the browser has been drawing throughout the animation written in left. In contrast, when you use transform, you only draw at the beginning and end of the animation. Therefore, for the performance of animation, transform should be better. As for the reason, a concept that triggers relayout is introduced here:

When we change some properties, if they are related to layout, the relayout will be triggered, which will take longer to render and draw. Therefore, we should avoid these attributes when writing animation: width, height, margin, padding, border, display, top, right, bottom, left, position, float, overflow and so on.

The attributes that will not be rearranged are: transform (translate, rotate, scale), color, background, and so on.

Therefore, we usually write css animation, we should give priority to the use of attributes that do not trigger re-layout, so that we can show the animation effect more smoothly.

The above is how the selection of css attributes affects animation performance. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.