Shulou(Shulou.com)06/02 Report--

This article will explain in detail the differences between js animation and css animation. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Differences: 1, js is frame-by-frame animation, each frame is controlled by the code, the code complexity is high, while css is the key frame animation, the motion tween is completed by the browser, the code complexity is low. 2. The animation of js is executed in the main thread, which is easy to cause blocking and waiting; the animation execution of css is in the composite thread, which is dedicated to the main thread and does not block the main thread.

The operating environment of this tutorial: windows7 system, CSS3&&javascript1.8.5 version, Dell G3 computer.

The difference between js Animation and css Animation

Difference one:

Js is a frame-by-frame animation, and each frame is controlled by code. Improper operation can easily lead to reflux.

Css is a Keyframe animation, and the part of the motion tween is completed by the browser, which is convenient for the browser to optimize and better control the execution process of the animation.

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

Difference two:

Js animation is executed in the main thread, and the main thread has other tasks to execute, which can easily cause blocking and waiting, and reduce the efficiency of animation execution.

The animation of css executes in the composite thread, specializes in the main thread and does not block the main thread, and the animation of the composite thread does not trigger backflow and redrawing.

CSS animation

Advantages:

(1) the browser can optimize the animation.

(2) the code is relatively simple and the direction of performance tuning is fixed.

(3) for lower versions of browsers with poor frame rate performance, CSS3 can be degraded naturally, while JS needs to write additional code.

Disadvantages:

1. The running process control is weak, and the event binding callback function cannot be attached. CSS animation 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 or bind playback events at a specific location, and has no progress report.

2. The code is lengthy. If you want to use CSS to implement a slightly more complex animation, the CSS code will eventually become very cumbersome.

JS animation

Advantages:

(1) JavaScript animation control ability is very strong, can control the animation in the animation playback process: start, pause, playback, termination, cancellation can be achieved.

(2) Animation effects are richer than css3 animation, some animation effects, such as curve motion, impact flicker, parallax scrolling effect, can only be completed by JavaScript animation.

(3) CSS3 has compatibility problems, but JS has no compatibility problems most of the time.

Disadvantages:

(1) JavaScript runs in the main thread of the browser, and there are other JavaScript scripts, style calculation, layout, drawing tasks that need to be run in the main thread, which may block the thread and cause frame loss.

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

Summary

If animation is just a simple state switch and no intermediate process control is required, css animation is the preferred option in this case.

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

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

Therefore, when realizing some small interactive effects, consider CSS animation more. For some complex control animations, it is more reliable to use javascript.

About "what is the difference between js animation and css animation" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

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.