Web动画库速查表

JavaScript 动画库

GSAP

业界领先的高性能动画库,支持CSS属性、SVG、Canvas等动画,可与React、Vue等框架无缝结合。

• 特点: 高性能、易用、功能强大、支持时间轴

• 安装: npm install gsap

• 使用:

  import { gsap } from "gsap";
  
  gsap.to(".box", { duration: 2, x: 100 });
  

Anime.js

轻量级的JavaScript动画库,支持CSS属性、SVG、DOM属性和JavaScript对象动画。

• 特点: 简单易用、轻量级、支持多种动画类型

• 安装: npm install animejs

• 使用:

  import anime from 'animejs/lib/anime.es.js';
  
  anime({
    targets: '.box',
    translateX: 250,
    duration: 2000
  });
  

Velocity.js

结合了jQuery的易用性和CSS的高性能的动画库,支持动画队列和上下文元素。

• 特点: 动画队列、上下文元素、易于使用

• 安装: npm install velocity-animate

• 使用:

  import velocity from 'velocity-animate';
  
  velocity(document.querySelector(".box"), { translateX: 250 }, { duration: 2000 });
  

CSS 动画库

Animate.css

动画效果丰富的CSS动画库,只需添加类名即可实现动画效果。

• 特点: 动画效果丰富、使用简单、兼容性好

• 安装: npm install animate.css --save

• 使用:

  <link rel="stylesheet" href="animate.css">
  <div class="animated bounce">Hello World!</div>
  

Hover.css

仅用CSS3实现的按钮悬停特效库,包含多种悬停效果。

• 特点: 特效丰富、仅用CSS3实现、易于使用

• 安装: npm install hover.css

• 使用:

  <link rel="stylesheet" href="hover.css">
  <a class="hvr-grow">Grow</a>
  

CSShake

一组CSS3动画类,用于创建摇动、晃动等效果。

• 特点: 动画效果独特、仅用CSS3实现、易于使用

• 安装: npm install csshake

• 使用:

  <link rel="stylesheet" href="csshake.css">
  <div class="shake-little">Shake it!</div>