前言

在Web开发中，动画是提升用户体验、增强界面交互性的关键要素。本文整理了2025年最具实用性的JavaScript动画库，涵盖3D渲染、CSS动效、滚动触发、文本动画等多种场景，结合功能特性与基础代码示例，助您快速找到适配项目需求的解决方案。

一、Three.js：Web 3D动画的全能引擎

作为Web端最主流的3D动画库，Three.js封装了WebGL底层复杂性，支持创建逼真的3D场景、模型及光影效果，同时兼容VR/AR交互。其丰富的几何图形库（如球体、立方体）和材质系统，让开发者无需深入图形学知识即可构建沉浸式3D体验。

threejs.webp

  • 应用场景

产品3D展示、Web游戏开发、虚拟展厅、数据可视化。

  • 代码示例
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 添加立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

二、GSAP（GreenSock Animation Platform）：高性能动画控制专家

被开发者誉为“最强JavaScript动画库”，GSAP提供精准的时间线控制、丰富的缓动函数及强大的插件生态（如ScrollTrigger实现滚动联动）。其优化的渲染机制可在低配置设备上流畅运行复杂动画，支持DOM元素、SVG及Canvas动画。

GSAP

  • 应用场景

页面转场动画、交互式数据图表、动态UI组件。

  • 代码示例
import gsap from 'gsap';
gsap.to('.box', { 
  duration: 1.5, 
  x: 400, 
  rotation: 360, 
  ease: 'elastic.out', 
  onComplete: () => console.log('动画完成') 
});

三、Animate.css：零代码基础的CSS动画神器

Animate.css无需编写JavaScript，仅通过添加CSS类即可实现60+种预设动画，包括淡入淡出、缩放、滑动等。其轻量特性（文件体积仅10KB+）和跨浏览器兼容性，使其成为快速构建交互动效的首选。

animate.css.webp

  • 应用场景

按钮悬停反馈、文本强调效果、图片加载动效。

  • 代码示例
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<!-- 使用动画类 -->
<h1 class="animate__animated animate__bounceInDown">Hello Animate.css</h1>
<button class="animate__animated animate__pulse animate__infinite">点击我</button>

四、Anime.js：轻量级跨平台动画解决方案

以简洁API和轻量特性著称（压缩后仅8KB），Anime.js支持动画CSS属性、SVG路径及DOM属性，同时提供时间线同步和循环动画功能。其灵活的配置项可轻松实现从简单过渡到复杂联动的多层次动画。

animate.js

  • 应用场景

移动端UI动画、数据图表动态更新、交互式插画。

  • 代码示例
import anime from 'animejs';
anime({
  targets: '.circle', // 选择器或DOM元素
  translateX: [0, 300], // 起始值到结束值
  translateY: [0, 150],
  rotate: '1turn', // 旋转一周
  easing: 'easeOutQuad', // 缓动函数
  duration: 1500, // 动画时长（毫秒）
  loop: true // 循环播放
});

五、Lottie by Airbnb：设计师与开发者的桥梁

通过解析Adobe After Effects生成的JSON文件，Lottie实现了动画设计与前端开发的无缝衔接。开发者无需手动编写动画代码，只需引入JSON文件即可渲染复杂动效，同时支持跨平台（Web、iOS、Android）应用。

Lottie by Airbnb

  • 应用场景

加载指示器、品牌LOGO动画、全页面过渡效果。

  • 代码示例
import lottie from 'lottie-web';
lottie.loadAnimation({
  container: document.getElementById('lottie-container'), // 渲染容器
  renderer: 'svg', // 渲染方式（svg/canvas/html）
  loop: true, // 循环播放
  autoplay: true, // 自动播放
  path: 'animation.json' // JSON文件路径
});

六、ScrollReveal：滚动驱动的交互增强工具

专注于视口滚动触发的动画效果，ScrollReveal通过简单配置即可实现元素随滚动渐入、滑动或缩放的动效。其轻量特性（压缩后仅3KB）和零依赖设计，适合优化长页面的用户浏览体验。

ScrollReveal

  • 应用场景

着陆页分屏动画、博客文章段落加载、产品功能分步展示。

  • 代码示例
import ScrollReveal from 'scrollreveal';
ScrollReveal().reveal('.section', {
  delay: 100, // 延迟执行时间（毫秒）
  duration: 800, // 动画时长
  distance: '20px', // 元素初始偏移距离
  easing: 'ease-out', // 缓动函数
  origin: 'bottom' // 动画起始方向（top/bottom/left/right）
});

七、Mo.js：创意动效与粒子系统的首选

基于模块化设计的Mo.js擅长创建路径动画、粒子爆炸及流体效果。通过组合预设形状（圆形、星形）和物理引擎，开发者可快速构建如按钮点击反馈、数据可视化图表等独特动效。

Mo.js

  • 应用场景

游戏界面交互、数据可视化动态图表、创意加载动画。

  • 代码示例
import { Shape } from '@mojs/core';
const particle = new Shape({
  shape: 'circle', // 形状
  fill: '#FF4488', // 填充颜色
  radius: {10: 50}, // 半径变化范围
  x: 200, y: 200, // 初始位置
  duration: 1000, // 时长
  easing: 'elastic.out', // 缓动
  count: 5, // 生成粒子数量
  delay: 'random(100, 300)' // 随机延迟
}).play();

八、Typed.js：文本交互的动态利器

专为文本内容设计的Typed.js，可模拟打字机效果逐字显示文本，支持多字符串切换、自定义打字速度及回退动画。其轻量特性（仅2KB）和极简API，使其成为标题动画、动态标语的理想选择。

Typed.js

  • 应用场景

网站头部标语、交互式表单提示、代码演示界面。

  • 代码示例
import Typed from 'typed.js';
const typed = new Typed('.typing-text', {
  strings: ['欢迎来到动态网站', '体验交互新视界'], // 显示文本数组
  typeSpeed: 50, // 打字速度（字符/秒）
  backSpeed: 30, // 回退速度
  loop: true, // 循环播放
  cursorChar: '|' // 光标字符
});

九、Popmotion：函数式动画的创新之选

基于函数式编程理念的Popmotion，提供物理驱动的动画逻辑（如弹性、重力效果），支持CSS属性、SVG及WebGL元素的动画控制。其时间线和缓动函数的灵活组合，适合构建响应式用户交互场景。

Popmotion

  • 应用场景

手势驱动动画、实时数据仪表盘、动态图表过渡。

  • 代码示例
import { spring } from 'popmotion';
const springAnimation = spring(0, {
  stiffness: 100, // 弹性系数
  damping: 15, // 阻尼系数
});
springAnimation.onUpdate = (value) => {
  element.style.transform = `scale(${value})`; // 缩放动画
};
springAnimation.start(1); // 从0过渡到1

十、Hover.css：纯CSS悬停效果的快捷方案

无需JavaScript支持，Hover.css提供100+种预设悬停动画类，涵盖缩放、旋转、阴影变化等效果。其即插即用特性和语义化类名设计，可快速提升按钮、链接等交互元素的视觉反馈。

Hover.css

  • 应用场景

电商网站商品卡片悬停、导航菜单交互、表单按钮反馈。

  • 代码示例
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css">
<!-- 使用悬停类 -->
<a href="#" class="hvr-sweep-to-right">立即体验</a>
<div class="hvr-grow-shadow">悬停放大</div>

总结：如何选择合适的动画库？

  1. 复杂度匹配
    • 简单CSS动效：优先选择Animate.css或Hover.css，零代码快速实现。
    • 复杂3D场景：Three.js和GSAP组合使用，前者处理渲染，后者控制时间线。
  2. 性能与体积：
    • 移动端或轻量项目：Anime.js（8KB）、ScrollReveal（3KB）等轻量级库。
    • 高性能需求：GSAP的优化渲染机制可保障复杂动画流畅运行。
  3. 团队协作：
    • 设计驱动项目：通过Lottie导入AE动画，减少开发与设计的沟通成本。
    • 框架集成：GSAP对React/Vue/Angular均有良好支持，适合大型项目。
  4. 场景适配：
    • 文本动画：Typed.js专注打字效果，场景针对性强。
    • 滚动交互：ScrollReveal以极简配置实现视口触发动画，提升浏览节奏感。