What is the difference between css3 animation and jquery animation

The difference between css3 animation and jquery animation: 1. css3 can set 3d animation, but jquery cannot realize 3d animation; 2. css’s 2d matrix animation is more efficient, and other attribute animations are less efficient. jquery uses margin and left , the matrix animation efficiency of top simulation is low, and the animation efficiency of other attributes is high.

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

What is the difference between css3 animation and jquery animation

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

CSS3 animation provides 2D, 3D and conventional animation property interfaces , it can work on any attribute of any element on the page. CSS3 animation is written in C language. It is a system-level animation, so its efficiency is definitely higher than js-simulated animation. Is this really the case? ?

After our testing, we found that CSS3 animation and javascript simulation animation have the following differences:

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

The 3D animation of CSS3 is a very powerful function in CSS3, because it works in a three-dimensional space, so js cannot simulate 3D animation like CSS3. Of course, is the actual application scenario of this 3D animation very wide? Worth thinking about...

2. The efficiency of CSS 2D matrix animation is higher than the matrix animation simulated by js using margin and left, top;

The 2D animation of CSS3 refers to 2D matrix Transform changes, such as scaling\deformation\x-axis\y-axis, of course js cannot do deformation animation. Take coordinate animation as an example. After our testing, we found that using CSS3 transform to create translateXY animation is nearly 700mm faster than position

left and position right in js! And it is also much smoother visually than js animation.

The efficiency of other conventional animation properties of CSS3 is lower than that of js simulated animation;

The conventional animation properties here refer to: height, width, opacity, border-width ,color…..

We once tested changing a DOM element from height:0 to height:100 in Android HTC. We used jQuery

animate and CSS3 transition and animation. The results show that CSS3 tansition and animation are both 500mm slower than jQuery

animate! Other regular animation properties are 400-500mm slower than jQuery animate!.

(Learning video sharing: css video tutorial)

The above is the detailed content of What is the difference between css3 animation and jquery animation. For more information, please follow other related articles on the PHP Chinese website!