当我赏识网页探求一个整洁的 Javascript 动画库时，我发明许多 “保举” 的动画库都有一段时刻没维护了。

颠末一些研究，我网络了 15 个最好的 Javascript 动画库，你可以安心在你的应用措施中行使。在文章最后我还添加了一些有效的库，可是有一部门好久没维护了。

行使纯CSS

在深入研究这些库之前，不要健忘行使纯 CSS 。 为什么？ 由于它是尺度的，它可以进步机能（GPU），提供向后和向前兼容性，它也许是建设动画的最有用要领。 这里有 10 个纯 CSS 实现的动画示例。

1、 Three.js

Three.js

高出 43K 的 star ，这个风行库是在赏识器上建设 3D 动画的好要领，以直观的方法行使 WebGL 。 这个库提供 <canvas>，<svg>，CSS 3D 和 WebGL 渲染器，让我们可以跨装备和赏识器建设富厚的交互式体验。 该库于 2010 年 4 月初次推出，今朝仍由近 1,000 名孝顺者开拓。

Github 客栈：https://github.com/mrdoob/three.js/

2、Anime.js

Anime.js

高出 20K 的 star，Anime 是一个 JavaScript 动画库，可以处理赏罚 CSS 属性，单个 CSS 转换，SVG 或任何 DOM 属性以及JavaScript 工具。 此库应承您链接多个动画属性，将多个实例同步，建设时刻轴等。

Github 客栈：https://github.com/juliangarnier/anime

3、Mo.js

Mo.js

这个库有 14K star，，是一个用于 Web 的动态图形器材带，具有简朴的声明性 API ，跨装备兼容性和高出 1500 个单位测试。 您可以在 DOME 或 SVG DOME 周围移动对象或建设独一的 mo.js 工具。 固然文档很少，可是示例很富厚，这里有 CSS 能力的先容。

Github 客栈：https://github.com/legomushroom/mojs

4、Velocity

这个库有 15K star，Velocity 是一个快速的 Javascript 动画引擎，具有与 jQuery 的 $ .animate() 沟通的 API 。 它具有色彩动画，转换，轮回，缓动，SVG支持和转动。 这是 Velocity 高机能引擎的解析，这里是行使该库的 SVG 动画的先容。

Github 客栈：https://github.com/julianshapiro/velocity

5、Popmotion

Popmotion

这个库有 14K star，这个动画库只有 11kb。 它应承开拓职员从举措建设动画和交互，举措是可以启动和遏制，并行使 CSS ，SVG，React，three.js 和任何接管数字作为输入的 API 建设。

Github 客栈：https://github.com/Popmotion/popmotion

6、Vivus

Vivus

高出 10K 的 star ， Vivus是一个零依靠的 JavaScript 类，可以让你为 SVG 建造动画，让它们具有被绘制的外面。 您可以行使很多可用动画之一，或建设自界说脚原来绘制 SVG 。 查察 Vivus-instant 获取及时示例，你也可以亲身下手试一下。

Github 客栈：https://github.com/maxwellito/vivus

7、GreenSock JS

GreenSock JS

GSAP 是一个 JavaScript 库，用于建设高机能，零依靠性，跨赏识器动画，声称在高出 400 万个网站中行使。 GSAP 很是机动，可以与 React，Vue，Angular 和 vanilla JS 一路行使。 GSDevtools 还可以辅佐改造行使 GSAP 构建的动画。

Github 客栈：https://github.com/greensock/GreenSock-JS

8、Scroll Reveal

Scroll Reveal

依附 15K star 和零依靠，该库为 Web 和 移动端赏识器提供了简朴的转动动画，以动画的方法表现转动内容。 它支持多种简捷的结果，乃至可以让您行使天然说话界说动画。 这是一个简短的 SitePoint 教程。

Github 客栈：https://github.com/jlmakes/scrollreveal

9、Hover (CSS)

Hover (CSS)

这是一个CSS库。 有 20K star，Hover 提供了 CSS3 驱动的鼠标 hover 结果的荟萃，可应用于 链接，按钮，logo，SVG，特色图像等，可在 CSS，Sass 和 LESS 中行使。 您可以复制并粘贴要在本身的样式表中行使的结果或引用样式表。

Github 客栈：https://github.com/IanLunn/Hover

10、Kute.js

Kute.js

一个完全成熟的原生JavaScript动画引擎，具有跨赏识器动画的根基成果。 重点是代码质量，机动性，机能和巨细（焦点引擎是17k min 和 5.5k gzipped） – 这是 一个演示。 该库也是 可扩展的，因此您可以添加本身的成果。

Github 客栈：https://github.com/thednp/kute.js/

11、Typed.js

Typed.js

这个库 6K star，根基上应承您以选定的速率为字符串建设打字动画。 您还可以在页面上安排 HTML div 并从中读取以应承搜刮引擎和禁用 JavaScript 的用户会见。 Slack 和 其他人都行使过这个库，它很受接待，并且很是有效。

Github 客栈：https://github.com/mattboldt/typed.js

还可以看看：iTyped

12、Airbnb 的 Lottie

Lottie

Lottie 是一个用于 Web 和 iOS 的移动端库，它行使 Bodymovin理会 Adobe After Effects 动画情势导出的 json ，并以原生方法泛起。

Github 客栈：<a href=https://github.com/airbnb/lottie-web” target=”_blank”>https://github.com/airbnb/lottie-web

13、Animate.css (CSS)

Animate.css

Animate.css 是最小和最易于行使的 CSS 动画库之一。 将 Animate 库应用于项目就像链接 CSS 并将所需的 CSS 类添加到HTML 元素一样简朴。 假如您乐意，还可以行使 jQuery 触发特定变乱的动画。

Github 客栈：<a href=https://github.com/daneden/animate.css” target=”_blank”>https://github.com/daneden/animate.css

14、Magic Animations (CSS)

Magic Animations (CSS)

Magic Animations 是一款令人印象深刻的动画库。 它有很多差异的动画，个中很多结果是这个库独占的。 与 Animate.css 一样，您只需导入 CSS 文件即可实现 Magic 。 您还可以行使jQuery中的动画。 该项目提供了一个出格酷的演示应用措施。

Github 客栈：<a href=https://github.com/miniMAC/magic” target=”_blank”>https://github.com/miniMAC/magic

15、CSShake (CSS)

CSShake (CSS)

CSShake 提供了一个专门为 web 页面中的摇摆元素而计划的 CSS 库。正如您所预期的，有很多变体可用来摇摆 web 组件。

Github 客栈：https://github.com/elrumordelaluz/csshake

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!