35个面向开发者的CSS JavaScript动画库

什么是网络动画？

网站动画库

tsParticles - TypeScript 粒子

什么是网络动画？

动画是为 HTML 页面中的对象设置的动态效果，旨在吸引注意力并提升用户体验。动画通常使用 HTML5、CSS3、Javascript、SVG 等创建。要为 Web 对象创建精美的动态效果，我们需要投入大量的时间和精力来编写代码。因此，您应该使用 CSS、JavaScript 动画库来减少编码的时间和精力。

网站动画库

Animejs

Animejs 是一个用 JavaScript 构建的小型开源库。它能让你轻松制作网站动画。Animejs 只需一个 API 即可在网页中使用 CSS 属性、SVG、DOM、JavaScript 对象等进行动画制作。链接 Animejs

司法部

MOJS 是一个开源 JavaScript 动效库，可在网页上快速轻松地设置。它有助于提升用户使用网站的体验，更直观地丰富内容，或创建引人入胜的动画……它还可以显示在设备的多个屏幕上。该库的独特之处在于，您可以通过划分模块来减小文件大小，并且经过超过 1580 次技术测试，具有极高的稳定性。链接：MOJS

KUTE.js

KUTE.js 是一个用 JavaScript 构建的开源库，旨在帮助您在 Web 开发过程中实现现代而美观的动效。它集成了众多功能、构建工具和其他辅助属性，可用于创建高级而复杂的动效。其文档也非常详细，包含大量可视化示例，让您轻松理解并应用于您的 Web 项目。链接：KUTE.js

格林索克

GREENSOCK 是一个库，可帮助您创建可在多种设备屏幕上显示的精美动效。它可以通过 CSS 属性、Canvas 库对象、SVG、React、Vue 等为网站中的几乎所有对象添加动画效果。此外，它还能优化这些动效的性能，并通过高科技测试确保网站的稳定性。此外，GREENSOCK 还提供详细介绍新功能的文章和 GREENSOCK 开发者论坛，帮助我们解答在 Web 项目应用中遇到的问题。链接：GREENSOCK

粒子.js

Particles.js 是一个开源库，可帮助您为网站创建美观有趣的动效。它的优势在于体积小巧、易于使用，并提供多种功能，让您能够灵活地将其应用于不同的网站。此外，它还具备预览功能，您可以通过我们在演示页面上更改的属性来预览您创建的动作效果。链接 Particles.js

SVG.js

SVG.js 是一个开源库，在 Github 上获得了超过 8000 个赞。它提供了全面的功能，可帮助您快速轻松地为网站创建 SVG 动画。此外，SVG.js 还具有其他优势，例如支持大量插件，可轻松更改对象的运动效果（例如颜色、大小、位置等），并且易于扩展。通过将其划分为小模块，每个功能都提供了详细的文档和具体示例……链接 SVG.js

Velocity.js

Velocity.js 是一个开源库，其灵感源自 Jquery 的 $.animate()。它是 Jquery 与 CSS3 的完美结合。当你用 $.velocity() 替换 $.animate() 时，你会看到网站性能显著提升，尤其是在移动设备上。为什么它与 Jquery 一起使用却性能更佳？库的创建者同步了 DOM 以最小化布局，并使用缓存来减少 DOM 查询次数。链接 Velocity.js

Vivus.js

Vivus.js 是一个开源 JavaScript 库，可帮助您为网页创建 SGV 动效。除了提供内置效果外，它还提供其他功能，让您可以创建自己的 SVG 动画效果。它主要分为三种动效类型：Delayed（延迟），决定每个元素的延迟时间；Sync（同步），所有元素同时开始和结束；OneByOne（逐一），每个元素依次绘制。您可以参考演示页面中的示例，以便于理解！链接 Vivus.js

Typed.js

Typed.js 是一个开源库，可帮助您为网页内容创建字体动效。您可以设置显示时间、效果延迟、要动画的内容类型……为了获得更直观的视图，您可以查看演示页面中的示例。链接 Typed.js

Choreographer-js

Choreographer-js 是一个设计简洁的库，可让您轻松为网站创建复杂的 CSS 动效。它提供了许多可在使用过程中轻松调整和扩展的属性，例如选择动效类型、设置对象样式以及基于 mousemove 、scroll 等事件设置动效……链接 Choreographer-js

使生动

Vivify 是一个基于 CSS3 构建的源代码库，可帮助您轻松使用效果通过类调用来移动我们想要在页面中显示的对象信息。它拥有超过 50 种效果，可帮助您为网站提供更丰富的内容。链接 Vivify

Micron.js

Micron.js 是一个基于 CSS3 构建并通过 JavaScript 控制的开源库。您可以使用 data-micron 属性轻松地为对象添加交互，通过 data-micron-bind = "true" 绑定交互与其他对象，并通过使用数据属性轻松调整运动效果，例如运动类型、运动时间等。您可以参考此库的手册部分。链接：Micron.js

移至

MoveTo 是一个 JavaScript 库，压缩后大小仅为 1kb 左右，可以轻松创建用户滚动网页时的动效。此外，它还提供了一些其他自定义功能，以适应多种类型的网站，例如设置动效时间、效果类型、使用回调函数等。链接 MoveTo

滚动显示

ScrollReveal 是一个开源库，可以轻松创建网页滚动效果。它可以显示在各种设备屏幕上，并可在当今大多数流行的网页浏览器上运行。ScrollReveal 还提供额外的功能自定义，方便在使用过程中轻松扩展，例如选择在任何设备上显示的效果、确定效果的运行时间或延迟、重复效果移动……链接 ScrollReveal

流行运动

Popmotion 是一个基于 JavaScript 的动态效果库，它允许你跨多种环境（浏览器、NodeJS 等）或通过 CSS、SVG、Canvas 等在网页对象上开发动态效果。它体积小巧，功能丰富，我认为非常适合为我们的网站创建动态效果。链接：Popmotion

Motio

Motio 是一个小型 JavaScript 库，可帮助您为网站添加动画效果。它适用于多种类型的 Web 项目，并针对网站性能进行了深度优化。链接 Motio

动画.css

Animate.css 是一个包含预设动效的库。您只需下载 animate.css 文件，并通过网页中要创建动画的对象的效果名称调用该类即可。由于它采用 CSS3 编写，您可以快速轻松地将其应用于各种 Web 项目。此外，它还提供了一些具有实用功能的类，例如定义延迟时间，例如 animate_delay -2s 类将延迟 2 秒；确定动效的速度，例如 animate_slower 类：该效果的执行时间为 3 秒……链接 Animate.css

魔法

Magic 也是一个内置的 CSS3 库，可帮助您轻松快速地创建动画。它还拥有许多独特有趣的动效，您可以参考演示页面查看详细示例。链接：Magic

AniJS

AniJS 是一个内置的 JavaScript 库，它可以通过 HTML 对象中的 data-anijs 属性轻松处理 CSS3 动画。它的大小仅为 9kb 左右，无需使用其他库，并且在各种设备上都能良好显示。我认为这是一个为网站创建动效的优秀库。此外，它的演示页面提供了一个工具，可让您预览动效并自动生成可应用于网站的代码。链接 AniJS