Home > Article > Web Front-end > About the impact of css attribute selection on animation performance

About the impact of css attribute selection on animation performance

不言Original: 2018-06-25 09:42:322081browse

The following article brings you an in-depth understanding of the impact of css attribute selection on animation performance. The content is quite good. I would like to share it with you now and give it as a reference.

Nowadays, the proportion of mobile phones is getting higher and higher, and all kinds of cool pages are emerging one after another. These special effects are inseparable from CSS animation. When it comes to CSS animation, the mainstream situations are nothing more than these two categories: displacement and deformation. When we write an animation special effect, how can we improve its performance? Of course, first we need to understand the basic concepts, such as the working principle of browser rendering, etc. I have a certain understanding of these after reading relevant articles written by several experts. I will not go into details here. Interested students can go find out. To put it simply and crudely, the purpose of this article is actually what CSS properties we should use to draw animations, which can effectively improve the performance of the browser in the rendering and drawing process.

Used left and transform respectively to translate 500px to the right in 2 seconds. The code is as follows:

<style>   
.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(0,0);   
}100%{   
-webkit-transform:translate(500px,0);   
}   
}   
</style>   
<body>   
<p class="box-ps"></p>   
<p class="box-tf"></p>   
</body>

Then I got the following results under chrome. The first one is a screenshot using left, and the second one is a screenshot using transform:

Transform screenshot

##Obviously, we can see in the frame mode that the number of left frames is lower than that of transform, and the time spent on rendering and drawing is much greater than that of transform. After seeing this, I believe everyone has already come to a conclusion.

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

Screenshot of transform

We can see that the entire animation process written using left , the browser has been performing drawing processing. Relatively speaking, when using transform, it is only drawn at the beginning and end of the animation. Therefore, transform is better for animation performance. As for the reason, here we will introduce a concept of triggering re-layout:

When we change some properties, if they are layout-related properties, re-layout will be triggered, causing the time required for rendering and drawing to be reduced. will be longer. Therefore, we should avoid these attributes when writing animations: width, height, margin, padding, border, display, top, right, bottom, left, position, float, overflow, etc.

The properties that will not be re-layout include: transform (translate, rotate, scale among them), color, background, etc.

Therefore, when we usually write CSS animations, we should give priority to using properties that do not trigger re-layout, so that the animation effects we display can be smoother.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Instructions on the use of css3 animation effect animate and introduction to browser compatibility

About css Use of the background-attachment attribute

The above is the detailed content of About the impact of css attribute selection on animation performance. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Implementation of angularJS combined with canvas drawingNext article：Implementation of angularJS combined with canvas drawing

See more

About the impact of css attribute selection on animation performance

Related articles