What is the difference between js animation and css animation

Difference: 1. JS is a frame-by-frame animation, each frame is controlled by code, and the code complexity is high; CSS is a key frame animation, and the tween animation part is completed by the browser, and the code complexity is low . 2. The js animation is executed on the main thread, which can easily cause blocking and waiting; the css animation is executed on the synthesis thread, which is dedicated to its work and does not block the main thread.

The operating environment of this tutorial: Windows 7 system, CSS3&&javascript version 1.8.5, Dell G3 computer.

The difference between js animation and css animation

Difference 1:

js is frame by frame Each frame of animation is controlled by code. Improper operation can easily cause reflow

css is a key frame animation, and the tween animation part is completed by the browser, which facilitates browser optimization and is controlled by the animation execution process. Better

The code complexity of js animation is higher than that of CSS animation

Difference 2:

js animation is executed on the main thread, and the main thread is still If there are other tasks to be performed, it is easy to cause blocking and waiting, which will reduce the efficiency of animation execution.

CSS animation is executed in the synthesis thread, specializes in work, does not block the main thread, and the animation of the synthesis thread will not trigger reflow and Redraw

CSS animation

Advantages:

(1) The browser can animate optimize.

(2) The code is relatively simple, and the performance tuning direction is fixed

(3) For low-version browsers with poor frame rate performance, CSS3 can be naturally degraded, while JS needs Writing additional code

Disadvantages:

1. The running process control is weak and event binding callback functions cannot be attached. CSS animations can only be paused, cannot find a specific time point in the animation, cannot reverse the animation halfway, cannot change the time scale, cannot add callback functions at specific positions or bind playback events, and there is no progress report

2. The code is lengthy. If you want to use CSS to implement slightly more complex animations, the CSS code will become very cumbersome in the end.

JS animation

Advantages:

(1) JavaScript animation control ability is very strong, You can control the animation during animation playback: start, pause, playback, terminate, and cancel.

(2) Animation effects are richer than CSS3 animations. Some animation effects, such as curve movement, impact flicker, and parallax scrolling effects, can only be completed by JavaScript animations

(3) CSS3 has compatibility issues , and JS most of the time does not have compatibility issues

Disadvantages:

(1)JavaScript runs in the main thread of the browser, and there are other needs in the main thread Interference with running JavaScript scripts, style calculations, layouts, drawing tasks, etc. may cause threads to be blocked, resulting in frame loss.

(2) The complexity of the code is higher than that of CSS animation

Summary

If the animation is just a simple state switch, No intermediate process control is required. In this case, CSS animation is the preferred solution.

It allows you to put animation logic in style files without flooding your page with Javascript libraries.

However, if you are designing a very complex rich client interface or developing an APP with complex UI states. Then you should use js animation so that your animation can remain efficient and your workflow is more controllable.

So, when implementing some small interactive effects, consider CSS animation more. For some complex controlled animations, using JavaScript is more reliable.

For more programming related knowledge, please visit: Programming Video! !

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