最新版本 V4 · 全新 ES Module API

轻量级 JavaScript
动画库，简单而强大

Anime.js 是一个快速、多用途、轻量级的 JavaScript 动画库，可作用于 CSS 属性、 SVG、 DOM 属性与 JavaScript 对象。


          npm i animejs

// 在线预览

为什么选择 Anime.js

极致轻量、API 优雅、能力全面 — 一个动画库满足所有需求。

⚡

极速性能

底层针对动画帧高度优化，复杂时间线也能流畅运行。

🪶

轻量体积

体积小巧，无运行时依赖，按需 ESM 引入，加载即用。

🎨

多用途

同时支持 CSS、SVG、DOM 属性与任意 JavaScript 对象。

✨

API 简洁

声明式语法，stagger / 缓动 / 时间线一行搞定。

用法

Anime.js V4 通过导入 ES 模块来使用。下面的示例展示了如何用 stagger 实现错落有致的位移与旋转动画。

▸声明式属性配置，自动推导单位
▸内置丰富缓动函数（如 inOutQuint）
▸loop + alternate 轻松循环往返

app.js

import {
  animate,
  stagger,
} from 'animejs';

animate('.square', {
  x: 320,
  rotate: { from: -180 },
  duration: 1250,
  delay: stagger(65, { from: 'center' }),
  ease: 'inOutQuint',
  loop: true,
  alternate: true
});

NPM 开发脚本

先运行 npm i 安装依赖，然后使用 npm run <script>

脚本	动作
dev	监听 `src/*/.js` 的变更，将 ESM 版本打包到 `lib/` 并生成类型声明
dev:test	同时运行 `dev` 和 `test:browser`
build	将 ESM / UMD / CJS / IIFE 版本打包到 `lib/` 并生成类型声明
test:browser	启动本地服务器并运行所有浏览器相关测试
test:node	启动 Node 相关测试
open:examples	启动本地服务器以便在本地浏览示例