十个值得前端保藏的CSS3动效库
目下当今的网站和App的计划中愈来愈重视用户体验，而优秀的动效则能使你的应用更具交互性，从而吸引更多用户的使用。我一样平常会在网站中参加一些复杂而分歧的动效，我所用的技能则是用SASS +bourbon 来生成出那些基于CSS3的动画后果来。但若你对CSS3中界说动效还不谙练，或但愿采纳加倍复杂间接的体式格局在你的应用中引入动效的话，你可以参考并使用下面的这10个优秀动效库东西。
1. Animate.css
Animate.css是我比拟爱好的一个CSS3动效库，十分得当那些对CSS3动画后果不熟悉，但又但愿给本人所做的网站或基于H5的APP引入动效的伴侣。因为，你只必要给必要实现动效的元素添加上Animate.css中预界说的那些动效称号就能够了。比方罕见的：bounce，flash，fadeIn，fadeOut等等，加起来有75种差别的动效，完全可以或许满足你的根本必要了。
固然关于这个库也有一些使用注意事项，比方你最好在给元素添加动效样式完成动效后，顿时将这个动效样式去掉。别的，关于动效的时长，振动幅度等，你也必要做一些调整。因为，我感到它默认设置中的动效过于疾速和激烈了。Animate.css曾经供给了详细的文档报告你该当如何做这些调整。
2. Bounce.js
Bounce.js是一个可以或许生成CSS3动效的小东西，它是用JavaScript编写的'，供给了一个Web界面，你可以添加一个组件然后就能够选择包含Scale，Translate，Rotate，Skew这些动效范例，然后辨别设置它们的参数，当到达你想要的后果后，你可以将这个动效以CSS的体式格局导出，这样你就能够将它应用到你的应用中了。
3. CSS3 Animation
CSS3 Animation是一个十分复杂易用的动效东西，你可以在它供给的复杂图形界面里，经由过程拖拽一些进度条来把持你的动效，生成的CSS代码会自动表现鄙人面的一个文本框里，你可以拷贝粘贴到你的应用中间接使用。
4. CSS Animate
假如你感到上面的东西还无法做出你想要的动效，那么可以看看CSS Animate这个东西。它能让你设置更多的动效参数，比方你可以同时设置动效起始和终止状态的坐标，大小，以及透明度，这样你就可以做出加倍复杂的动效来。
5. Magic Animations
Magic Animations与Animate.css非常类似，也是一个预界说了一系列动效的CSS库。但与Animate.css的最大差别多是，它界说的那些动效更炫也更酷一些，假如你的网站也很新潮，那可以考虑使用这个CSS动效库。
6.AniJS
AniJS是一个经由过程JavaScript把持的动效库。它答应你经由过程它的链式语法来界说动效。比方下面这个例子：当用户点击时这个元素会沿Y轴翻转。
7. Single Element CSS Spinners
我们常常会必要一些动效来表达系统处于加载或处置数据的过程当中。Single Element CSS Spinners这个在GitHub上的项目，供给了一组十分标致的可用于加载的CSS3动效。
8.Snabbt.js
Sanbbt.js是我很爱好的一个动效库，它十分小巧只有5K，所以可以被用在移动应用中。并且它也撑持链式语法，你可以很便当地写出复杂的动效组合。
snabbtelement,
position: [200, 0, 0],
easing: functionvalue
return value + 0.3 * Math.sin2*Math.PI * value;
.snabbt
position: [0, 0, 0],
easing: 'easeOut'
;
9. Odometer
Odometer是用来给数字作动效的，比方经由过程它你可以很好地出现网站人数的增加，倒计时等与数字相关的动画后果。
10.Hover.css
Hover.css供给了少量的Hover后果，包含2D变更，图标变更，布景变更等等。并且几近可以应用于所有元素，包含链接，按钮，logo，SVG甚至图片等等。