当我浏览网页寻找一个整洁的 Javascript 动画库时，我发现很多 “推荐” 的动画库都有一段时间没维护了。

经过一些研究，我收集了 15 个最好的 Javascript 动画库，你可以放心在你的应用程序中使用。在文章最后我还添加了一些有用的库，但是有一部分很久没维护了。

使用纯CSS

在深入研究这些库之前，不要忘记使用纯 CSS 。 为什么？ 因为它是标准的，它可以提高性能（GPU），提供向后和向前兼容性，它可能是创建动画的最有效方法。 这里有 10 个纯 CSS 实现的动画示例。

1、 Three.js

Three.js

超过 43K 的 star ，这个流行库是在浏览器上创建 3D 动画的好方法，以直观的方式使用 WebGL 。 这个库提供 ，

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 仓库：https://github.com/airbnb/lottie-web

13、Animate.css (CSS)

Github 仓库：https://github.com/daneden/animate.css

14、Magic Animations (CSS)

Github 仓库：https://github.com/miniMAC/magic

15、CSShake (CSS)

名称栏目：2019年值得收藏的15个JavaScript和CSS动画库
转载来源：http://www.shufengxianlan.com/qtweb/news45/379595.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联