推荐下免费好用功能强大的网页动画效果库，希望可以帮到你们

动效设计是2018年的热门之一，当你仔细找找，会发现许多有趣的用来构建UI动效的工具和素材，而这些素材和工具能使设计师和前端事半功倍。

今天的文章，我将会推荐11个开源动效库，帮你的设计加速。

1. GSAP

GSAP 可能目前最炫酷的免费动画库之一了。它运行于纯粹的 JavaScript 之上，是目前最强健的动画资源库之一。

它符合 HTML5 的规范，并且和几乎所有的现代浏览器都能良好的协同，可以SVG、画布元素甚至 jQuery 对象良好地协同，诸如 EaselJS 这样的库也可以和 GSAP 联动。

如果你需要一个强大的网页动画库的话，GSAP绝对值得一看。

2. Anime.js

anime.js是一个强大的用来制作动画的javascript库，虽然功能没有GASP（greensock）强大，但胜在它足够轻便，gzip压缩完只有9kb左右，麻雀虽小，却五脏俱全。它的功能并不仅限于UI/UX动画的制作。

你可以借助 Anime.js 将动画加持在LOGO、按钮、图像等各种各样的元素上并且支持各种常见的触发机制，比如点击、悬停、滑动，你可以借助它定义一系列的动画。

3. Wicked CSS

Wicked CSS 是一个基于CSS代码的相对更新一些的动效库。Wicked CSS 借助 CSS3的特性，提供了一些堪称不可思议的特效。

在它的首页上，你会看到许多实时演示，你可以通过这些范例学会如何让对象进行旋转、翻转、划入等不同类型的动画效果。

有些动画效果很简单，但是它同样可以实现许多复杂而有趣的动画，这也是Wicked CSS 有意思的地方。

4. Animate CSS

Animate.css是最简单、最易用的 CSS 动画库之一。将动画库应用到你的项目中，就像链接 CSS 并且在 HTML 元素中添加所需的 CSS 类一样简单。。如果您愿意，还可以使用 jQuery 触发特定事件的动画

到 2017 年年中，它仍然是最流行、使用最广泛的CSS动画库之一。其压缩后的文件也非常小（16.6kb），也可以用于移动端网站。它在Github上拥有 4.2 万颗星，并且在许多大型项目中，它经常被打包成的一个组件。

Animate.css 在 4 年后仍然处于积极的发展阶段。这是最简单、最强大的动画库之一，我们可以毫不犹豫地在任何项目中使用它。

5. Tuesday

Tuesday 所提供的动画最令人着迷的地方，是其中动画都非常的简单、有用。借助这个库，你可以有效的控制页面中元素的出现和消失的方式。

这些动画并不是那种炫酷屌炸天的，相反它们是非常微妙的，真正从美学和用户体验的层面提升整个页面的设计。

Tuesday 是纯粹的CSS代码，几乎可以和任何网站无缝地衔接起来。

6. CSShake

当用户输入不正确的时，苹果就会震荡某个 UI 元素(对话框，模态或文本框)以响应，就好像模仿一个人摇头表示 “不” 。CSShake 提供了一系列有趣的震荡动画，并且在这个库中变化不大（愚人码头注：效果相近）。

坦率的讲，我从来没有见过比 CSShake 更加奇怪或者有趣的 CSS库了。它所带来的动画效果非常的疯狂、独特，它并不一定适合每个网站。

换句话来说，就是 CSShake 所提供的动效其实是独一无二的。

7. Mo.js

mo.js是Oleg Solomka开发的一款图形动画javascript库。通过它你可以制作出非常有趣的图形动画效果。

Mo.JS 非常的庞大，而且它是完全为UI/UX设计而生的动效库。并且关于 Mo.js 有大量的文档和教程、代码操作并不复杂，了解之后就可以轻松掌握。

8. Animate Plus

animateplus（Animate Plus）是一个基于现在的网络的动画模块。Animate Plus是一个专注于性能和创作灵活性的JavaScript动画库。它的目标是提供稳定的60 FPS，重量小于2 KB（缩小和压缩），使其特别适合移动设备。

9. Bounce.js

只需要点击几下，你就可以借助Bounce.js创造出强大的CSS3 和 JS动画了。

Bounce.js是一个整齐的动画库，附有大约十个动画“预设”，因此图书馆的尺寸很小。和 animate.css 一样，动画流畅而完美。如果你的需求是 “pop and bubble(气泡和泡泡)” 样式的动画类型，并且希望降低文件大小的话 ，你可能想考虑使用这个库。

在主页上，你会找到一个模块化的自定义动画生成器，通过这种方式，Bounce.js 会帮你将特定的功能添加到你的页面上，无需添加额外的代码。

和其他的同类工具不同的地方在于，它不仅仅是一个库，而是有这用户可以直接操作的实际功能，它带有一个完整的网页构建器。Bounce.js 是为数不多的可以直接在浏览器中进行设计和设置的动画库之一。

10. Magic

Magic Animations 是最令人印象深刻的动画库之一，它有许多不同的动画，其中有许多是该库独有的。与 Animate.css 一样，你只需导入 Magic 的 CSS 文件即可。你也可以在 jQuery 中使用动画。该项目还提供了一个非常酷的演示程序。

与 Animate.css 相比，Magic Animations 文件的大小适中。它的签名动画，如 magic 效果，foolish 效果和 bomb 效果非常有名。

如果你正在寻找一些不寻常的效果，我绝对会建议你在你的下一个项目中给这个动画库一个机会。肯定不会令你失望的。

11. Hover.css

Hover.css 是一个 CSS 动画库，专为你的网站中使用的按钮和其他UI元素而设计。它有非常好的 2D 转换，还有许多其他精心制作的动画

Hover.css 最适合用于页面中的小元素，例如按钮、Logo、SVG组件 或 要突显的图像，而不是更大、更复杂的页面动画。它有一个完整的动画案例列表，它的体积相对较大（但是，我仍然觉得这个体积可以更优化）。可以说，它最引人注目的动画效果是它独特的speech bubbles 和 curls 。