-webkit-transform:translate3d (0,0,0) triggers GPU acceleration for smoother web page animations

Some time ago, according to the video effect of the United States to write a similar effect of the web version of the animation.

There are three types of browsers installed on your computer: IE, Chrome, Firefox. Tests were made, and the results showed that Chrome renders the worst in this respect. There is often a phenomenon of Dayton. FF behaves best.

have been baffled, especially before using the canvas label to make the image filter effect, the Chrome browser unexpectedly does not show the filter effect. However, other browsers are able to display the normal, big Google you swollen ... Give up on rendering multiple pictures and animations ...

Chatting with an expert yesterday, said the situation, he said Transform:translate3d (0,0,0) can trigger hardware acceleration. Then the landlord today on Baidu a bit of this CSS3 provides 3D effect, sure enough this property will turn on GPU hardware acceleration mode. This allows the browser to move from the CPU to the GPU while rendering the animation.

thus The landlord today added to the file such as the following code:

<span style= "White-space:pre" ></span>transform:translate3d (0,0,0);-webkit-transform:translate3d ( 0,0,0);-o-transform:translate3d (0,0,0);-moz-transform:translate3d (0,0,0);-webkit-backface-visibility:hidden;- Webkit-perspective:1000;-moz-backface-visibility:hidden;-moz-perspective:1000;backface-visibility:hidden; perspective:1000;

Then take advantage of the timeline tools in Chrome's developer tools. Detects the performance parameters of the entire animation execution. To achieve the best control effect, the modified version number is tested first, and then the version number is not improved to prevent the impact of the cache. Test the improved version of the page first. The picture will be cached, and this will be measured not to improve the version number, only can be said to not improve the version number of the more advantageous, in this case the comparison. But more to explain the problem, haha.

Improved version number of parameters:

No improvement in the number of references:

FPS with no improved version number (number of frames transmitted per second.) The higher the value of the picture is more fluent more than half of the time is less than 30fps, and the improved animation fps basically more than 60fps, the landlord himself to onlookers animation effect, also found a significant improvement. The non-smooth effect of the Chrome browser has been greatly improved. Of course for the whole effect. Landlord CSS3 and JQ animation combined use, JQ animation effect compared to CSS3. So the landlord further improvement, with a powerful CSS3 to complete the entire animation effect. It should be great!

-webkit-transform:translate3d (0,0,0) triggers GPU acceleration for smoother web page animations