[!重要]
🎉 Anime.js V4 现已提供早期访问 🎉
经过多年的开发,Anime.js V4 终于可以通过我的 GitHub 赞助商 进行早期访问了!
anime.js
JavaScript 动画引擎 | animejs.com
Anime.js(/ˈæn.ə.meɪ/
)是一个轻量级的 JavaScript 动画库,具有简单而强大的 API。
它可以处理 CSS 属性、SVG、DOM 属性和 JavaScript 对象。
技术支持
开始使用
下载
通过 npm
$ npm install animejs --save
或者手动下载。
使用方法
ES6 模块
import anime from 'animejs/lib/anime.es.js';
CommonJS
const anime = require('animejs');
文件引入
在 HTML 中链接 anime.min.js
:
<script src="anime.min.js"></script>
Hello world
anime({
targets: 'div',
translateX: 250,
rotate: '1turn',
backgroundColor: '#FFF',
duration: 800
});
文档
演示和示例
- CodePen 演示和示例
- juliangarnier.com
- animejs.com
- 移动字母 作者 @tobiasahlin
- 渐变地形动画 作者 @crnacura
- 有机形状动画 作者 @crnacura
- 碎片滑块 作者 @lmgonzalves
- 错开动画
- 缓动动画
- 球体动画
- 分层动画
- anime.js 标志动画
浏览器支持
Chrome | Safari | IE / Edge | Firefox | Opera |
---|---|---|---|---|
24+ | 8+ | 11+ | 32+ | 15+ |
网站 | 文档 | 演示和示例 | MIT 许可证 | © 2019 Julian Garnier。