Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "what are the differences between css3 animation and jquery animation". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The difference between css3 animation and jquery animation: 1, css3 can set 3D animation, jquery can not achieve 3D animation; 2, css 2d matrix animation efficiency is high, other attribute animation efficiency is low, jquery using margin and left, top simulation matrix animation efficiency is low, other attribute animation efficiency is high.

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

What's the difference between css3 animation and jquery animation?

About the advantages and disadvantages of css3 animation and jquery animation:

CSS3 animation provides 2D and 3D as well as general animation attribute interface, it can work in any attribute of any element of the page, CSS3 animation is written in C language, it is system-level animation, so its efficiency is absolutely higher than js simulation animation, is that really it?

After our test, we found that there are the following differences between CSS3 animation and javascript simulation animation:

1. CSS 3D animation cannot be realized in js.

CSS3 3D animation is a very powerful function in CSS3, because it works in a three-dimensional space, so js is unable to simulate 3D animation like CSS3. Of course, it is worth thinking about whether the actual application scene of this 3D animation is very wide.

2. CSS 2D matrix animation is more efficient than js matrix animation simulated by margin and left,top.

CSS3 2D animation refers to 2D matrix Transform changes, such as scaling\ deformation\ x axis\ y axis, of course, js can not do deformation animation. Take coordinate animation, for example, after our tests, we found that using transform of CSS3 to do translateXY animation is better than position in js.

Left,position right is close to 700mm! And visually, it is much more fluid than js animation.

Other general animation attributes of CSS3 are less efficient than animations simulated by js.

General animation attributes here refer to: height,width,opacity,border-width,color … ..

We tested changing a DOM element from height:0 to height:100 in Android HTC, and we used jQuery

Transition and animation of animate and CSS3. The results show that tansition and animation of CSS3 are slower than that of jQuery.

Animate 500mm! Other general animation attributes are slower than jQuery animate 400-500mm!.

This is the end of the content of "what is the difference between css3 animation and jquery animation". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.