CSS and JS animation, which is more efficient.

First, don't confuse JavaScript with jquery errors. jquery shows animations are slower than native JavaScript. The reason is that although jquery is very powerful, his goal has never been to be a high-performance animation engine.

Because jquery provides a variety of animation interfaces, it is not possible to avoid the problem of layout jitter.

the memory consumption frequency of jquery will trigger the garbage collection mechanism, causing the animation to drop the frame problem.

in order to protect its own animation mechanism, jquery uses setinterval instead of requestanimationframe.

the transition of CSS

CSS's transition animation logic is run by a rover, so it's better than jquery animation. Processing mechanism:

Optimize DOM operations to avoid memory consumption to reduce

the use of requestanimationframe similar mechanisms to

force hardware (GPU to improve animation performance) acceleration

Using the RAF interface does not require refactoring of existing libraries. Here's a comparison of the basic uses of RAF and SetInterval:

var startingtop = 0;

/* SetInterval: In order to achieve 60fps the interval is set to 16ms   (1000ms/60 ~= 16ms)./
SetInterval (function () {/
    * is executed 60 times per second here, So we set the top attribute increment to 1/60 sec
    /element.style.top = (startingtop + = 1/60);

/* Requestanimationframe: When the browser is in good working order, try to run
/function tick () {
    Element.style.top = (startingtop + 1/60) ;
}

Window.requestanimationframe (tick);

Conclusion: The use of RFA will achieve higher animation performance with little code churn

Description

However, is not JavaScript is worse than CSS transition performance. Can you make JavaScript performance better?

Mobile side development, if there is a simple state switch, the simple use of CSS transition, if there are more UI interaction, you can

Use Transit (JavaScript controls CSS Transition). So JavaScript can be better than CSS transition performance.

Velocity.js

The richness of Greensock animation (GSAP) does not mean that velocity itself is weakly functional. In contrast, velocity not only contains all the features of jquery's $.animate (), but also integrates color animations, transforms, loops, Easings, class animations, and scrolling animations. All of this, compressed only after 7KB

In short, velocity is the equivalent of combining the Jquery,jquery UI with the CSS transitions.

In addition, from a use point of view, Velocity uses the jquery. Queue () method, with the jquery. Queue () method, and thus with jquery. Animate (),. Fade (),. Fade (),. Delay () Features seamless integration. Because Velocity's syntax is the same as $.animate (), you don't need to change the code in your page.

Let's start with a preliminary look at the similarities between Velocity.js and $.animate ():

$element
    . Delay (1000)//
    The upward motion of the velocity control element continues to 2000ms
    /. Velocity ({top: 50%}, Watts)/
    * When the element moves upwards, the element is faded out by using JQuery's Own method
    . fadeout (1000);

Further, you can create a 3D scrolling animation scene and just two simple code:

$element
    /* Scroll the browser over the 1000ms to the top of the element *
    /velocity ("scroll", 1000)/
    * and then rotate the element 360 degrees along his y-axis
    . Velocity ({ Rotatey: "360deg"}, 1000);