10个前端动画库让你的交互更加炫酷

Animate.css

animate.css 是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。

GitHub：github.com/animate-css…

Hover.css

Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画，这些可以非常轻松的被应用到按钮、LOGO 以及图片等元素。所有这些效果都是只需要单一的标签，必要的时候使用 before 和 after 伪元素。因为使用了 CSS3 过渡、转换和动画效果，因此只支持 Chrome、Firefox 和 Safari 等现代浏览器。

Github：github.com/IanLunn/Hov…

Magic.css

Magic CSS3 Animations 动画是一款独特的CSS3动画特效包，可以自由地使用在网页中。只需简单的在页面上引入 CSS 文件: magic.css 或者压缩版本 magic.min.css 就可以使用了。

Github：github.com/miniMAC/mag…

React Spring

react-spring 是一个基于弹簧物理学的动画库，满足大多数与UI相关的动画需求，提供了足够灵活的工具，可以自信地将想法投射到不断变化的界面中。该库代表了一种现代动画方法。它继承了 animated 强大的插值和性能，以及 react-motion 的易用性。

GitHub：github.com/pmndrs/reac…

React Reveal

React Reveal 是适一个用于 React 的高性能动画库。它占用空间小，专门为 ES6 中的 React 编写。可用于创建各种炫酷的滚动效果显示。

GitHub：github.com/rnosov/reac…

Greensock

GreenSock是一个JavaScript动画库，可轻松对HTML元素进行动画处理。用于创建高性能，零依赖性，跨浏览器动画，声称在超过 400 万个网站中使用。其具有一下特点：

速度快，专门优化了动画性能，使之实现和css一样的高性能动画效果。
轻量与模块化。模块化与插件式的结构保持了核心引擎的轻量，TweenLite包非常小(基本上低于7kb)。提供了TweenLite, TimelineLite, TimelineMax 和 TweenMax不同功能的动画模块，你可以按需使用。
没有依赖。
灵活控制。不用受限于线性序列，可以重叠动画序列，可以通过精确时间控制，灵活地使用最少的代码实现动画。
任何对象都可以实现动画。

Github：github.com/greensock/G…

Velocity.js

Velocity.js 是velocity模板语法的javascript实现。Velocity 是基于Java的模板引擎，广泛应用在阿里集体各个子公司。Velocity模板适用于大量模板使用的场景，支持复杂的逻辑运算，包含本数据类型、变量赋值和函数等功能。还拥有：颜色动画、转换动画(transforms)、循环、缓动、SVG 动画、和 滚动动画 等特色功能。Velocity.js 支持 Node.js 和浏览器环境。

其具有以下特点：

支持客户端和服务器端使用
语法是富逻辑的，构成门微型的语言
语法分析和模板渲染分离
基本完全支持velocity语法
浏览器使用支持模板之间相互引用，依据kissy模块加载机制

GitHub：github.com/julianshapi…

Lax.js

Lax.js 是一款原生零依赖的制作跟随页面滑动的 JavaScript 动画插件，这款插件非常的轻巧，压缩版大小只有3kb。当滑动页面时，帮助创建酷炫的动画效果，比如滚动视差、变形移动等基本的动画效果，响应式兼容方面，比如手机端也有不错的支持。除了可以使用插件默认集成的动画属性，还可以自定义更加丰富的动画属性。

GitHub：github.com/alexfoxy/la…

Rellax.js

rellax.js是一款轻量级的纯JavaScript滚动视觉差特效插件。rellax.js压缩后的版本仅871字节，在手机等小屏幕设备中，插件会自动限制视觉差特性。

Github：github.com/dixonandmoe…

three.js

three.js 是一个易于使用、轻量级、跨浏览器的通用 JavaScript 3D 库，它是一套基于WebGL 开发出的Javascript 函式库，它提供了比 WebGL 更简单的Javascript API，让开发者能够轻易在浏览器制作 3D 绘图。

GitHub：github.com/mrdoob/thre…

最后还赠送一份前端大礼包送给大家【加君羊：581286372】帮助大家更好的学习！