CSS animation: equivalent to tween animation, with emphasis on starting and ending states (suitable for simple animation)

Advantages:

  1. With good performance, the browser will optimize the animation. The browser will use composite threads to complete all DOM operations in each frame in a single backflow or redraw instead of occupying the main thread. For hidden or invisible elements, there will be no backflow or redraw, reducing CPU, GPU and memory usage
  2. Will force on animation acceleration, heard of GPU to improve animation rendering performance
  3. For older browsers with poor frame rate performance, CSS3 can degrade naturally, and JS requires additional code to be written

Disadvantages:

  1. The process control for animation is very weak, can not carry out complex process control
  2. Complex animation code is long and complex
  3. Css3 has compatibility problems

Js animation: equivalent to frame animation, emphasis on process (suitable for complex animation)

Advantages:

  1. For animation process control ability is strong, can carry on very complex animation operation
  2. Complex animation code is simpler than CSS animation
  3. Code compatibility is slightly better

Disadvantages:

  1. Can occupy the main thread, may cause blocking, loss of frames, etc