Repolode
提交项目
juliangarnier

juliangarnier/anime

轻量级 JavaScript 动画库，可为 CSS 属性、SVG、DOM 属性和普通对象添加动画。

在 GitHub 查看官网
Star
73,752
Fork
4,987
未关闭 Issue
124
最近提交
2个月前

这是什么？

Anime.js 是一个 JavaScript 动画引擎，用同一套 API 为 CSS 属性、SVG 元素、DOM 属性和 JavaScript 对象添加动画。开发者通过目标选择器和属性值声明动画，并可设置时长、延迟、缓动、循环和往返播放等选项。

第 4 版以 ES 模块形式发布，通过 animejs 包引入。内置的 stagger 工具可以让多个目标依次错开延迟启动，例如从中心向外扩散。项目采用 MIT 许可证。

仓库提供构建脚本，可输出 ESM、UMD、CJS 和 IIFE 版本，并生成 TypeScript 类型声明，同时包含浏览器端和 Node 端的测试。完整文档位于官网，从 v3 迁移到 v4 也有对应的指南。

核心功能

  • 01用同一套 API 为 CSS 属性、SVG、DOM 属性和 JavaScript 对象添加动画。
  • 02通过 stagger 为多个目标错开动画延迟。
  • 03支持缓动函数、循环播放和往返播放。
  • 04以 ES 模块发布，并提供 UMD、CJS 和 IIFE 版本。
  • 05包含 TypeScript 类型声明。

适用场景

  • 为网页元素添加运动效果，例如页面加载时移动或旋转方块。
  • 为网页界面中的 SVG 路径和图标添加动画。
  • 在普通 JavaScript 对象上对数值做补间动画，用于 canvas 或自定义渲染。

快速上手

  1. 1

    使用 npm 安装该包

    npm i animejs
  2. 2

    从 animejs 导入 animate 和 stagger，并对选择器调用 animate

标签

#animation#javascript#svg#css#canvas#frontend-library#anime#javascript-library

常见问题

anime 是什么？
轻量级 JavaScript 动画库，可为 CSS 属性、SVG、DOM 属性和普通对象添加动画。 Anime.js 是一个 JavaScript 动画引擎，用同一套 API 为 CSS 属性、SVG 元素、DOM 属性和 JavaScript 对象添加动画。开发者通过目标选择器和属性值声明动画，并可设置时长、延迟、缓动、循环和往返播放等选项。
anime 可以免费使用吗？用的什么许可证？
anime 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
anime 还在维护吗？
半年内有更新。anime 最近一次提交是在 2026年8月21日。
anime 适合用来做什么？
为网页元素添加运动效果，例如页面加载时移动或旋转方块。 为网页界面中的 SVG 路径和图标添加动画。 在普通 JavaScript 对象上对数值做补间动画，用于 canvas 或自定义渲染。
anime 怎么安装和运行？
使用 npm 安装该包: npm i animejs 从 animejs 导入 animate 和 stagger，并对选择器调用 animate
在哪里获取 anime？
源代码和安装说明在 GitHub 上：https://github.com/juliangarnier/anime

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目