Home > Developer > Web Develop
Now the proportion of mobile phones is getting higher and lower, all kinds of cool and colorful pages, 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. And when we're writing an animated effect, how do we improve its performance? Of course, first we need to understand the basic concepts, such as the working principle of browser rendering, these I also read a few Daniel wrote related articles only a certain understanding, this side I do not elaborate, interested students can go to understand. The purpose of this simple and rude, in fact, we should use what CSS properties to animate animation, can effectively improve the browser in the rendering and drawing process performance.
Left and transform are used respectively to shift the 500px displacement 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><Divclass= "Box-ps"></Div><Divclass= "BOX-TF"></Div></Body>
Then you get the following results under Chrome, the first one for using left, and the second for using transform:
Transform's
Obviously, we can see in frame mode that left is lower than transform frame number, and it is time consuming to render and draw this side, left is far greater than transform. See here, I believe we have a conclusion in mind.
We'll use Chrome's show paint rectangles to see what the difference is between the areas rendered and plotted during the animation, the first one for using left, and the second for using transform:
Transform's
As we can see, the browser is always drawing processing while using left to write the entire animation. In contrast, when using transform, it is only when the animation starts and ends that it is drawn. Therefore, for the performance of the animation, transform to be more excellent. As for the reason, here is the concept of triggering a re-layout:
When we change some of the properties, the layout-related properties trigger a redesign, which will take longer to render and draw. Therefore, we should avoid these properties when we write animations: width, height, margin, padding, border, display, top, right, bottom, left, position, float, overflow, etc. 。
Do not start the properties of the re-layout are: transform (where translate, rotate, scale), color, background, etc.
So, when we write CSS animations, we should prioritize the use of properties that do not trigger re-layout, so that we can show the animation more smoothly.
Reprint please specify from: Ctrip Design Committee
The effect of CSS property selection on animation performance
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
