In the recent period of work, often used animation, I have mainly touched three.

animate.css
anime
velocity

Here's an analysis of their strengths and weaknesses

animate.css

Advantage:
animate.css mainly uses css to achieve animation effect. At present, there are dozens of predefined animations, which are very simple to use. Basically, we can find the desired animation effect. By adding the corresponding class. animated. dynamic class to the dom structure, the dom has the dynamic effect. Is it very simple?
API (Pretend to be the correct translation)

fade: {
        title: 'Fade in and fade out',
        fadeIn: 'Fade in',
        fadeInDown: 'Fade down',
        fadeInDownBig: 'Fast fade-in downward',
        fadeInLeft: 'Fade to the right',
        fadeInLeftBig: 'Fast fade in to the right',
        fadeInRight: 'Fade to the left',
        fadeInRightBig: 'Quickly fade in to the left',
        fadeInUp: 'Fade upward',
        fadeInUpBig: 'Fast upward fade in',
        fadeOut: 'Fade out',
        fadeOutDown: 'Fade down',
        fadeOutDownBig: 'Fast fade-out downward',
        fadeOutLeft: 'Fade to the left',
        fadeOutLeftBig: 'Quickly fade out to the left',
        adeOutRight: 'Fade out to the right',
        fadeOutRightBig: 'Quickly fade out to the right',
        fadeOutUp: 'Fade upward',
        fadeOutUpBig: 'Fast fade up'
      },
      bounce: {
        title: 'Bouncing class',
        bounceIn: 'Bounce in',
        bounceInDown: 'Bounce down into',
        bounceInLeft: 'Jump right into',
        bounceInRight: 'Jump left into',
        bounceInUp: 'Bounce up and enter',
        bounceOut: 'Jump out',
        bounceOutDown: 'Bounce down and exit',
        bounceOutLeft: 'Jump to the left and exit',
        bounceOutRight: 'Jump to the right and exit',
        bounceOutUp: 'Bounce up and exit'
      },
      zoom: {
        title: 'Scaling class',
        zoomIn: 'Enlarge Entry',
        zoomInDown: 'Zoom in downward',
        zoomInLeft: 'Enlarge to the right',
        zoomInRight: 'Enlarge to the left',
        zoomInUp: 'Zoom in upwards',
        zoomOut: 'Reduce exit',
        zoomOutDown: 'Shrink down and exit',
        zoomOutLeft: 'Shrink to the left and exit',
        zoomOutRight: 'Shrink to the right and exit',
        zoomOutUp: 'Downsizing up and exiting'
      },
      rotate: {
        title: 'Rotating class',
        rotateIn: 'Rotate in clockwise',
        rotateInDownLeft: 'Roll in from left to bottom',
        rotateInDownRight: 'Roll in from right to down',
        rotateInUpLeft: 'Roll in from left to top',
        rotateInUpRight: 'Roll in from right to top',
        rotateOut: 'Quit clockwise',
        rotateOutDownLeft: 'Roll left down',
        rotateOutDownRight: 'Rotate down to the right',
        rotateOutUpLeft: 'Turn left up',
        rotateOutUpRight: 'Rotate right up'
      },
      flip: {
        title: 'Flipping class',
        flipInX: 'Horizontal flip-in',
        flipInY: 'Vertical flip-in',
        flipOutX: 'Horizontal Flip Exit',
        flipOutY: 'Vertical flip exit'
      },
      strong: {
        title: 'Emphasis class',
        bounce: 'bounce',
        flash: 'Twinkle',
        pulse: 'pulse',
        rubberBand: 'Elastic',
        shake: 'Left and right weak sloshing',
        swing: 'Swing up and down',
        tada: 'Zoom oscillation',
        wobble: 'Strong left and right sloshing',
        jello: 'Stretch jitter'
      }

Use chestnuts

$('#yourElement').addClass('animated bounceOutLeft');

Disadvantages:

1. The official animated.css provides dozens of effects, but there are always some effects that may need to be modified, or some effects are not provided by other names. At this point, animate.css seems a bit laborious, because there is no custom animation api available at present.

2. If our dom structure already has tranform or other related css settings, then by adding animted animation class, our original css effect will be overwritten. The solution is to use a div.wrap around the dom and then load the animation effect into. wrap to avoid overwriting the original effect. Related discussion issue

velocity

Advantage:

1. Velocity is a lightweight JS animation library which is easy to use, high performance and rich in functions. It works perfectly with jQuery and has the same API as $. animate(), but it does not depend on jQuery and can be used alone. Velocity not only contains all the functions of $. animate(), but also has such features as color animation, transformation animation, loop, slow motion, SVG animation, and scroll animation.
Support native js, jq, react writing, as a vue powder, disappointed that he has no vue related plug-ins for the time being
2. There are also dozens of animate.css-like predefined animation APIs
3. Supporting custom effects, assembly queue effects, etc.
4. Animation callbacks such as Begin & Complete & Progress callbacks
Chinese Documents click
Disadvantages:
1. Actually, I don't think there are any shortcomings for me to meet my various needs. If I have to pinch something, I can say that there are not enough API demos and I need to try more assemblies myself.
2. At present, many children's shoes use jquery less, Velocity lost a lot of points, such as his custom animation is combined with Velocity-ui + jq.

anime

anime.js(/ daren..me/) is a lightweight and flexible JavaScript animation library. It can work with css, svg, Dom nodes and JS objects.
Actually, people who use velocity don't have to use anime anymore because anime has, and velocity compatibility is better than anime.
But I happened to use... So let's talk about it.
Advantage:
1. Customizable animation effects to support queue effects
2. Support start, run, update, complete callback functions
3. The functions of play(), pause(),restart(), etc. supporting animation
Disadvantages:
1. Lack of custom effects
2. Fewer document demo s

Small problems encountered in use:
1. The default is not uniform. You need to set easing:'liner'

(Detailed collation to be continued)