2017 年用于 UI 设计的 CSS3 和 JavaScript 动画库

前端网页设计在过去的十年里经历了一场革命。在2007年，我们大多数人仍在设计静态杂志布局，在2017年，我们重新设计了数字机器，有成千上万的调整、协调、移动的部件。
简单的说，很好的UI设计师还需要成为很好的动画师 – 需要对网络动画技术有一个很好的理解。

这是我们指南中最新更新的，帮助你为每个任务选择正确的动画库。我们将通过 9 个免费的、编码良好的动画库，最适合于UI设计，它们的优点和缺点，以及何时选择它们。

请记住，我们是从一个熟悉代码的UI设计师（而不是从代精通代码的开发人员）的角度来看待每个库。这些库中有一些是纯 CSS 实现的。其他是JavaScript 的，但是，除了了解基本的 HTML/CSS 之外，使用他们你不需要更多的其他知识。链接一个动画库 – 添加一个 CSS 类 即可。

2017 年 9 大动画库列表:

1.Animate.css
2.Bounce.js
3.AnimeJS
4.Magic Animations
5.DynCSS
6.CSShake
7.Hover.CSS
8.Velocity.js
9.AniJS

下面就简单介绍一下前四个动画库：

Animate.css是最简单、最易用的 CSS 动画库之一。将动画库应用到你的项目中，就像链接 CSS 并且在 HTML 元素中添加所需的 CSS 类一样简单。。如果您愿意，还可以使用 jQuery 触发特定事件的动画。

到 2017 年年中，它仍然是最流行、使用最广泛的CSS动画库之一。其压缩后的文件也非常小（16.6kb），也可以用于移动端网站。它在Github上拥有 4.2 万颗星，并且在许多大型项目中，它经常被打包成的一个组件。
Animate.css 在 4 年后仍然处于积极的发展阶段。这是最简单、最强大的动画库之一，我们可以毫不犹豫地在任何项目中使用它。

Bounce.js 是一个 JavaScript 动画库，专注于为你的网站提供一种独特的有趣的、有弹性的、华纳兄弟式的动画。

Bounce.js是一个整齐的动画库，附有大约十个动画“预设”，因此图书馆的尺寸很小。和 animate.css 一样，动画流畅而完美。如果你的需求是 “pop and bubble(气泡和泡泡)” 样式的动画类型，并且希望降低文件大小的话 ，你可能想考虑使用这个库。

AnimeJS 是我们榜单上唯一的新成，但自创作以来的12个月里，它赢得了众多的粉丝。它非常通用，功能强大，而且它也可以为 HTML 游戏动画提供动力。唯一真正的问题是，对于简单的 web 应用来说，它是否过度？也许吧。但是，由于它的速度也很快，而且相对容易学习，所以很难找到它的缺点。

AnimeJS 被描述为一个轻量级的 JavaScript 动画库，可以与任何CSS属性、单独的 CSS transforms、SVG 或任何 DOM 属性以及 JavaScript 对象一起工作。它真的很棒 – 太棒了，事实上，我用 GIF 捕捉 下来的动画图无法对动作流畅和平滑做出公正的展示。

最令人印象深刻的是，Anime.JS 有令人惊叹的“文档”，演示 HTML，JavaScript 代码 和在一个漂亮的应用环境中使用案例。
简而言之，如果您对 JavaScript 动画解决方案很满意，那么就很难找到忽略 Anime.JS 的理由。

Magic Animations 是最令人印象深刻的动画库之一，它有许多不同的动画，其中有许多是该库独有的。与 Animate.css 一样，你只需导入 Magic 的 CSS 文件即可。你也可以在 jQuery 中使用动画。该项目还提供了一个非常酷的演示程序。
与 Animate.css 相比，Magic Animations 文件的大小适中。它的签名动画，如 magic 效果，foolish 效果和 bomb 效果非常有名。如果你正在寻找一些不寻常的效果，我绝对会建议你在你的下一个项目中给这个动画库一个机会。肯定不会令你失望的。

你应该选哪个库？
有许多动画库已经准备就绪，等待在您的项目中实现。上面列出的是一些具有最佳和最稳定的几个。
如果您正在寻找一个简单易用的强大的 CSS 解决方案。Animate.CSS 可能是最通用的、最适合使用的选项。
如果你正在寻找一个更完整、功能强大的JavaScript选项，VelocityJS 和 Anime.JS 不分伯仲。Velocity 目前拥有更多的动画实现 和 更大的使用量基础，但是对于 Anime.JS 这样一个新项目来说是令人难以置信的完美 和 令人激动的。目前，Anime.JS 美丽的文档可能足以赢得我们的青睐。
尽管在您的 web 应用程序中使用一个动画库可以提高交互性，但是过度使用它可能会违背用户的目的，并且经常使用户迷惑。请小心谨慎地使用它们。
你会在你的项目使用动画库吗？你最喜欢的动画库是哪个以及列表之后的几个动画库如果你想了解的话，欢迎留言！（QQ：1753689239）