This is the 17th day of my participation in the August More text Challenge. For details, see:August is more challenging

JS animation

Disadvantages:

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

(2) Code complexity is higher than CSS animation

Advantages:

(1)JavaScript animation control ability is very strong, you can control the animation in the process of animation playback: start, pause, replay, terminate, cancel can be done.

(2) The animation effect is 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, while JS does not have compatibility problems most of the time

CSS animations

Disadvantages:

(1) The running process control is weak, and the event binding callback function cannot be attached. CSS animations can only be paused, can’t find a specific point in time in the animation, can’t reverse the animation halfway, can’t change the time scale, can’t add callbacks at specific locations or bind playback events, no progress reports

(2) The code is verbose. If you want to do a slightly more complex animation with CSS, you end up with a very clunky CSS code.

Advantages:

(1) The browser can optimize the animation.

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

(3) For low version browsers with poor frame rate performance, CSS3 can do natural degradation, while JS needs to write additional code

The reason for the smooth CSS animation

The render thread is divided into the Main thread and the Compositor thread.

If the CSS animation only changes transform and opacity, the entire CSS animation is completed in the Compositor Thread (while the JS animation is executed in the Main thread, triggering the Compositor to proceed to the next step).

While the JS performs some expensive tasks, the main Thread is busy, and the CSS animations stay fluid thanks to the Compositor Thread.

CSS animations are smoother than JS animations:

  1. JS is performing some expensive tasks
  2. The CSS animation does not trigger the layout or paint. When the CSS animation or JS animation triggers the paint or layout, the main thread needs to redo the Layer tree. In this case, the CSS animation or JS animation will block the subsequent operations.

Only the following properties are valid for “Composite only, not Layout or paint” :

  • backface-visibility
  • opacity
  • perspective
  • perspective-origin
  • transfrom

Therefore, the advantages of CSS3 animation only come into play when 3D acceleration is used or opacity is modified.

conclusion

If the animation is simply a state switch and no intermediate process control is required, CSS animation is the preferred option in this case. It lets you put animation logic in style files without flooding your pages with Javascript libraries. However, if you’re designing a complex rich client interface or developing an APP with a complex UI state. Then you should use JS animations so that your animations can remain efficient and your workflow is more manageable. So, when it comes to implementing small interactive effects, consider CSS animations. For some complex controlled animations, javascript is more reliable.