标签：

动效设计一直都是比来几年前端开发的热门趋势之一。动画是Web和UI设计的主要内容。一个完全静止的网站，即使是使用了微妙的悬停状态，也可能觉得不一样。如果缺少动画，就像缺少须要的对象一样。

幸运的是，有很多要领可以为你的网站添加动画。如果你仔细找找的话，会发明许多有趣的用来构建UI动效的工具，而这些工具也正在成为越来越多设计项目中不成或缺的催化剂。WebGL，JavaScript甚至HTML5都撑持或专用于动画。同样是动画，在前端范围中，web动画和JS动画又有什么区别呢？

图片源自网络，仅做配文展示

Web动画的素质是元素状态转变造成的样式变换，CSS动画和JS动画的区别并不是由语言来决定的，而是由两者的特点和适用场景来判断的。CSS动画简洁高效，提升交互体验而编写的代码可以轻松地和主要业务逻辑之间实现断绝，开发中建议优先使用。

而当你需要更丰富的缓动函数，多东西关联动画或是需要在动画执行的特按时间点关联一些其他的业务逻辑等需要细节控制的场景中，JS动画就会显得越发清晰且易维护，两者从来都不长短黑即白的选项。但是就网络动画效果而言，CSS动画更容易学习和实现。

尽管如此，我们作为前端开发人员，仍然需要花费大量时间来掌握它，因为它可以真正辅佐我们在此期间学习和使用一些示例代码。

今天小渡就为你收集整理了一些优秀的CSS动画库，你可以安心在你的应用措施中使用。

01Kite

Kite是一个灵活的构造助手CSS库。Kite使用inline-block而不是最新的CSS语法。

它注重实际，易于理解且容易使用。Kite用法与flexbox相似：justify-content,等等。你可以很轻松地创建庞大的模块。

Kite是基于OOCSS与MindBEMding，它可以辅佐您快速构建本身的组件。Kite撑持几乎所有浏览器，它属于MIT许可。

图片源自网络，仅做配文展示

02DynCSS

DynCSS将您的CSS解析成-dyn-(attribute)法则。这些法则是模拟浏览器事件(如滚动和缩放)的javascript表达式。其功效会应用到上面指出的CSS属性。

你可以将任何CSS属性设置为动态–前提是它对付jQuery的css()要领是可写的。你可以通过附加-dyn-前缀并指定一个引用的javascript表达式来实现。

图片源自网络，仅做配文展示

03Animate.css

Animate.css是一个有趣的，跨浏览器的css3动画库。它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达60多种动画效果，几乎包罗了所有常见的动画效果。

值得注意的是，它的兼容性只涵盖撑持CSS3animate 属性的浏览器：IE10+、Firefox、Chrome、Opera、Safari。

图片源自网络，仅做配文展示

04Coveloping-css

Coveloping的动画生成器概略是刚接触CSS3动画想要了解它是如何事情的新手最抱负的选择。这个简单而又强大的工具可以辅佐你测试所供给的差别类型动画，并轻松地检测出它们之间的区别。

你只需要设置四个参数：动画类型、动画成果、连续几多秒以及动画是否为无限循环。当你完成以后，你就可以获取生成的HTML和CSS代码了。

图片源自网络，仅做配文展示

05Hover.css

Hover.CSS是一个有用的CSS3悬停效果调集，可用于行动挪用，按钮，商标，特性图片等。自定或直策应用到你本身的元素上都非常的简单。

Hover.css可以用多种方法来使用;可以复制粘贴你喜欢的效果到你本身的样式内外，也可以引用样式表。然后只需向你想要的元素需添加对应效果的class名称即可。如果你只筹算使用一个或几个效果，最佳实践是复制粘贴一个效果。

图片源自网络，仅做配文展示

06Spinkit

Spinkit是一个酷炫的加载动画CSS调集。Spinkit使用CSS动画来创建吸引人的易于自界说的动画。