Try to animate using translate instead of changing top/left (translate)

Source: Internet
Author: User
Tags translate function

Objective

This article is translated from why moving Elements with Translate () is Better Than pos:abs Top/left, this article has been modified to add some author's own understanding, the wrong place also please spectators pointed out.

Translation text

There are two ways to move an element in a document,

1, easing using the translate family function provided by transform

2, absolute positioning of elements, change the Top/left value within the set time

But what is the difference between these two ways?

To long story short, the author has tested the animated FPS on Chrome and found a significant difference between the two: performance.

The picture at the top left is the frame rate that is animated by changing the element top/left, while the upper right is the frame rate that invokes the translate function. We can see clearly that each frame on the left is executed for a relatively long time, and in each frame, the CPU needs to calculate the other styles of the element, especially the styles of box shadows, gradients, fillets, and so on, which need to be applied to the element in a complex calculation. From this point of view, if the older mobile devices are relatively complex animation, then the effect is certainly not ideal.

By invoking translate, hardware acceleration is initiated, which renders the element at the GPU layer. In this way, the CPU will be relatively free to perform other calculations, the GPU is relatively quick to calculate the style, and guarantee a large frame rate. We can enable GPU computing with the transform of 2d and 3d.

Summarize

Finally, we summarize some of the main points of animating elements:

1, try to animate with keyframes and transform so that the browser allocates the length of each frame itself and optimizes

2, if you do not want to use JS to animate, using Requestanimateframe

3, use 2d transform instead of changing the value of Top/left, this will have shorter repaint time and more smooth animation effect

4, the mobile side of the animation may be worse than the PC side, so be sure to pay attention to performance optimization, minimizing the DOM complexity of animation elements, to perform the DOM operation asynchronously after the end of the animation

Try to animate using translate instead of changing top/left (translate)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.