前端网页设计在过去十年中经历了一场革命。在已故的顽皮中，我们大多数人仍在设计静态杂志布局。如今，我们正在构建具有数千个调整大小，协调，移动部件的“数字机器”。
很简单，优秀的ui设计师也需要成为伟大的动画师?– 对网络动画技术有扎实的理解。
请记住，我们从代码精通的ui设计师的角度来看待每个库，而不是“代码大师”开发人员。其中一些库是纯css。其他是javascript，但没有什么比基本的html / css理解更有用了。链接图书馆;?添加一个css类。
我们的9大动画库列表animate.cssbounce.jsanimejs魔法动画dyncsscsshakehover.cssvelocity.jsanijsanimate.cssanimate.css是最小和最易于使用的css动画库之一。将animate库应用于项目就像链接css并将所需的css类添加到html元素一样简单。如果您愿意，还可以使用jquery触发特定事件的动画。
创作者：丹尼尔伊登发行日期：2013年当前版本：人气：描述：?“css动画的跨浏览器库。易于使用，简单易用。“库大小：?47 kbgithub：https：//github.com/daneden/animate.css许可证：在撰写本文时，它仍然是最受欢迎和广泛使用的css动画库之一，其缩小文件也足够小，可以包含在移动网站中。它在github上有明星，并且经常被打包成许多大型项目的组件。
animate.css仍在积极开发中。这是最简单，最强大的动画库之一，我们会毫不犹豫地在任何项目中使用它。
bounce.jsbounce.js是一个javascript动画库，专注于为您的网站提供一系列独特有趣，充满乐趣的“华纳兄弟式”动画。
创作者：tictail发布日期：2014年当前版本：人气：描述：“立即创建漂亮的css3动力动画。”库大小：16 kbgithub：https：//github.com/tictail/bounce.js许可证：bounce.js是一个整洁的动画库，附带了大约十个动画“预设” – 因此库的体积很小。与animate.css一样，动画流畅无瑕。如果您的需求以“pop和bubble”式动画类型为中心，并且可以从较低的文件大小开销中受益，您可能需要考虑使用此库。
animejsanimejs是我们列表中的最新成员，但自创建以来赢得了众多皈依者。它具有令人难以置信的多功能性和强大功能，并且不会为html游戏动画提供动力。唯一真正的问题是“?简单的网络应用程序是否有点过分？”
也许。但由于它也快速，小巧且相对容易学习，因此很难找到它的错误。
animejs被描述为一个轻量级javascript动画库，可以“?与任何css属性，单个css转换，svg或任何dom属性以及javascript对象一起使用”。这真是太棒了 – 事实上，我所采取的gif捕获对于动作的平滑和柔和是不公平的。
该项目可在github上获得。
创作者：julian garnier发布日期：2016年当前版本：人气：描述：“javascript动画引擎”。图书馆大小：10.9kbgithub：https：//github.com/juliangarnier/anime许可证：最令人印象深刻的是，anime.js拥有令人惊叹的“文档”，可以在漂亮的应用程序环境中演示html，javascript代码和工作示例。
简而言之，如果您对javascript动画解决方案感到满意，则很难找到忽略anime.js的理由。
魔法动画magic animations是一个令人印象深刻的动画库。它有许多不同的动画，其中许多是这个库非常独特的。与animate.css一样，您只需导入css文件即可实现magic。您还可以使用jquery中的动画。该项目提供了一个特别酷的演示应用程序
当前版本：人气：描述：“具有特殊效果的css3动画”库大小：36.5 kbgithub：https：//github.com/minimac/magic许可证：与animate.css相比，magic animation的文件大小适中，并且以其标志性动画而闻名，例如魔法效果，愚蠢效果和炸弹效果。
如果你正在寻找一些与众不同的东西，我肯定会建议你在下一个项目中为这个动画库添加一个镜头。你不会失望的。
dyncssdyncss是一个动画库，您可能希望在您的网站中使用动态库以及视差效果。要更清楚地了解使用此库可以执行的操作，请查看此演示。
创作者：vittorio zaccaria发布日期：2014年当前版本：人气：描述：“使用dynamic css让您的网站变得生动。”github：https：//github.com/vzaccaria/dyncss许可证：dyncss是一个没有大受欢迎的简单库，正如它在github上的明星数量所证明的那样。但它仍然值得一看。这个库提供的一个很酷的功能是元素相对于滚动的旋转，vittorio在dyncss主页上精美地演示（这是视差相关页面的完美用例）。
csshakecsshake提供了它在盒子上所说的内容 – 一个专门用于在网页中抖动元素的css库。正如您所料，有许多变体可用于摇动您的web组件。
当前版本：人气：库大小：78.8 kbgithub：https：//github.com/elrumordelaluz/csshake许可证：当用户输入不正确的响应时，apple推广了ui元素，大力摇动ui元素（对话框，模态或文本框） – 模仿一个人摇头。csshake提供了一系列有趣的“摇动”动画，这个库中不乏变化。
虽然目前该库比dyncss更受欢迎，但我觉得通常文件大小可能无法通过它添加的功能来证明。虽然动画很聪明，但我想不出很多用例，你不需要为非摇动效果包含第二个动画库。但也许我只是缺乏想象力？
hover.csshover.css是一个css动画库，设计用于网站中的按钮和其他ui元素。它有非常好的2d过渡，以及许多其他精心设计的动画。
当前版本：人气：描述：“轻松应用于您自己的元素，修改或仅用于灵感。”库大小：104.2 kbgithub：https：//github.com/ianlunn/hover许可证：hover.css最适合动画离散页面元素，如按钮，徽标，svg组件或特色图像，而不是更大，更复杂的页面动画。它有一个完整的例程列表，这说明它的尺寸相对较大（但是，我仍然认为尺寸可以更加优化）。可以说它最引人注目的动画效果是它独特的气泡和卷发。
velocity.jsvelocity.js是另一个复杂的全功能javascript动画套件，包括fade＆slide，scroll，stop，finish，reverse等功能。
它拥有令人印象深刻的大牌用户名单，包括tumblr，whatsapp，mailchimp，scribd，gap和htc，所以你知道它已经过对大型用户基础和奇怪边缘情况的战斗测试。
创作者：julian shapiro发布日期：2014年当前版本：人气：描述：“加速javascript动画。”库大小：34.8 kbgithub：https：//github.com/julianshapiro/velocity许可证：velocity可能不适合某些人，因为它是一个javascript动画引擎，它实际上是一个使用与jquery相同的api的动画引擎$.animate()。无论是否存在jquery，这都有效。也就是说，它的速度非常快，其功能包括色彩动画，变换，循环和缓动。从本质上讲，它是jquery和css转换相结合的最佳选择。
anijs我们的最终图书馆以其独特的方法而闻名。anijs是一个动画库，允许您以简单的“类似句子”的结构向元素添加动画。采用以下格式：
如果点击，在广场，做摆动动画要?.container盒
<div data-anijs=if: click, do: flipiny, to: .container-box></div>如果你不熟悉javascript，这可能是进入js编排运动的好方法。
创作者：anijs发布日期：2014年当前版本：人气：描述：“无需编码即可提升web设计的库。”库大小：10.5 kbgithub：https：//github.com/anijs/anijs许可证：anijs是一个具有非常合理的大小因素的库。与其他动画库（许多其他动画库可能会发现非常规动画库）相比，它用于实现的格式非常原始且不同。
不过，这个库值得为您的项目至少尝试一次。它可能缺乏一些竞争的整体力量和润色，但它有可能在未来增长。
你应该选择哪个图书馆？有许多动画库已准备就绪，等待在您的项目中实施。上面列出的是一些具有最佳复杂性和稳定性的组合。
如果您正在寻找一个简单易用，强大的css解决方案，animate.css可能是最通用的“bang-for-buck”选项。
如果您正在寻找更完整，更强大的javascript选项，velocityjs和anime.js很难分割。velocity目前拥有良好的记录和更大的安装基础，但anime.js令人难以置信的优雅和令人兴奋。现在，anime.js的精美文档可能足以赢得我们的支持。