10个免费好用功能强大的网页动画效果库

精选前端开发

动效设计是2018年的热门趋势之一。若是你仔细找找的话，会发现许多有趣的用来构建UI动效的工具，而这些素材和工具正在成为愈来愈多设计项目中不可或缺的催化剂。今天～小编为你推荐10个靠谱的开源免费网页动效库，帮你的设计加速～^_^

1. GSAP

GSAP 可能目前最炫酷的免费动画库之一了。它运行于纯粹的 JavaScript 之上，是目前最强健的动画资源库之一。它符合 HTML5 的规范，而且和几乎全部的现代浏览器都能良好的协同，能够SVG、画布元素甚至 jQuery 对象良好地协同，诸如 EaselJS 这样的库也能够和 GSAP 联动。若是你须要一个强大的网页动画库的话，GSAP绝对值得一看。

2. Anime.js

当我第一次看到Anime.js 这个库的时候，完全被它迷住了。这玩意很是强大，功能并不只限于UI/UX动画的制做。你能够借助 Anime.js 将动画加持在LOGO、按钮、图像等各类各样的元素上。它支持各类常见的触发机制，好比点击、悬停、滑动，你能够借助它定义一系列的动画。

3. Wicked CSS

Wicked CSS 是一个相对更新一些的动效库，它主要是基于CSS代码的。Wicked CSS 借助 CSS3的特性，提供了一些堪称难以想象的特效。在它的首页上，你会看到许多实时演示，你能够经过这些范例学会如何让对象进行旋转、翻转、划入等不一样类型的动画效果。有些动画效果很简单，可是它一样能够实现许多复杂而有趣的动画，这也是Wicked CSS 有意思的地方。

4. Animate CSS

也许 Animate.CSS 才是你想要的最终的网页动效解决方案。这个开源代码库是几年前发布的，可是时至今日它依然是最有用的动效代码库。开发者 Daniel Eden 是这个项目的发起者，他以最简化的方式在网页上发布自定义的 CSS3动画，经过半年多时间的积累，构建出了一个完整的动画库，而且几乎能够应对绝大多数的项目。项目主页上有大量的演示，GitHub上还有许多很棒的文档供你参考。

5. Tuesday

Tuesday 所提供的动画最使人着迷的地方，是其中动画都很是的简单、有用。借助这个库，你能够有效的控制页面中元素的出现和消失的方式。这些动画并非那种炫酷屌炸天的，相反它们是很是微妙的，真正从美学和用户体验的层面提高整个页面的设计。Tuesday 是纯粹的CSS代码，几乎能够和任何网站无缝地衔接起来。

6. CSShake

坦率的讲，我历来没有见过比 CSShake 更加奇怪或者有趣的 CSS库了。它所带来的动画效果很是的疯狂、独特，它并不必定适合每一个网站。换句话来讲，就是 CSShake 所提供的动效实际上是独一无二的，这也是为何它会存在于这个列表当中。

7. Mo.js

经过细节仔细对比了诸多的 JavaScript 库以后，不得不说 Mo.js 是最好的动效库之一。Mo.JS 很是的庞大，并且它是彻底为UI/UX设计而生的动效库。关于 Mo.js 有大量的文档和教程，它的代码操做并不复杂，了解以后就能够轻松掌握。它有着许多使人惊叹的功能，不管是导航栏，仍是LOGO或者其余复杂的元素，它都可以将他们合理的动画化。

8. Animate Plus

Animate Plus 是一个轻量级的动效库，它只有2KB，可是它有着自定义 JavaScript 动画所需的所有基本功能。使用npm你能够轻松地将 Animate Plus 安装好，你只须要按照Github 上的代码进行设置便可。其中所包含的绝大多数都是基本的Demo，因此你不会碰到复杂的问题，不过经过Github，你会找到全部你须要的选项和方法。

9. Bounce.js

只须要点击几下，你就能够借助Bounce.js创造出强大的CSS3 和 JS动画了。在主页上，你会找到一个模块化的自定义动画生成器，经过这种方式，Bounce.js 会帮你将特定的功能添加到你的页面上，无需添加额外的代码。和其余的同类工具不一样的地方在于，它不只仅是一个库，而是有这用户能够直接操做的实际功能，它带有一个完整的网页构建器。Bounce.js 是为数很少的能够直接在浏览器中进行设计和设置的动画库之一。

10. Magic

Magic 多是最有趣的动效库之一。它集合了许多基于CSS3的动画效果，而且带有许多在别的地方根本找不到的自定义样式。这是一个很是大的CSS3代码库合集，你也会在这里学会许多巧妙的动画设计技巧。 本位做者：Geek豪哥，原文连接：http://igeekbar.com/igeekbar/post/983.htm。转载请注明出处。

关于更多

区块链究竟是个什么鬼？一幅漫画让你秒懂！

屏幕适配之尺寸的相关概论《一》

破解Android版微信跳一跳,一招教你挑战高分

记一次阿里面试经历|Java面试知识整理

分分钟教你学会正则表达式

2017上半年技术文章集合—184篇文章分类汇总

高级UI特效仿直播点赞效果—一个优美炫酷的点赞动画

一个实现录音和播放的小案例

NDK项目实战—高仿360手机助手之卸载监听

相信本身，没有作不到的，只有想不到的

微信公众号：终端研发部