Anime.js V4 现已面向 GitHub 赞助者开放抢先体验!

Anime.js (/ˈæn.ə.meɪ/) 是一个轻量级的 JavaScript 动画库,拥有简单而强大的 API。
它适用于 CSS 属性、SVG、DOM 属性和 JavaScript 对象。

入门

交错动画

轻松实现连续动画。

向前
从索引开始
从中心开始
缓动
反向
涟漪

Anime 内置的交错动画系统使复杂的连续和重叠动画变得简单。它可用于时间轴和属性。

了解更多关于交错动画

分层 CSS 变换

一个元素就够了。

translateX
translateY
rotate
scale

在单个 HTML 元素上同时使用不同的时间轴对多个 CSS 变换属性进行动画。

了解更多关于关键帧

控制和回调

时间就是一切。

动画开始
循环 1 开始
更改开始
更改完成
循环 1 完成
反转
循环 2 开始
更改开始
更改完成
循环 2 完成
反转
循环 3 开始
更改开始
更改完成
循环 3 完成
动画完成
延迟
结束延迟
更改

使用完整的内置回调和控制函数来同步播放、暂停、控制、反转和触发事件。

了解更多关于回调

动画化任何内容

HTML、JS、CSS、SVG。

Anime.js 适用于任何 Web 内容。CSS、SVG、DOM 属性和 JavaScript 对象:使用单个统一的 API 对所有内容进行动画处理。

了解更多关于可动画属性

入门

资源和文档。