2017 上海网站设计的 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

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

• 创建者: Daniel Eden

• 发布: 2013

• 当前版本:

• 受欢迎程度:

• 描述: “一个跨浏览器的 CSS 动画库。就像简单的东西一样容易使用。”

• 库大小: 43 kB

• GitHub: https://github.com/daneden/animate.css

• 许可证:

到 2017 年年中，它仍然是最流行、使用最广泛的CSS动画库之一。其压缩后的文件也非常小（16.6kb），也可以用于移动端网站。它在Github上拥有 4.2 万颗星，并且在许多大型项目中，它经常被打包成的一个组件。

Animate.css 在 4 年后仍然处于积极的发展阶段。这是最简单、最强大的动画库之一，我们可以毫不犹豫地在任何项目中使用它。

Bounce.js

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

• 创建者: Tictail

• 发布: 2014

• 当前版本:

• 受欢迎程度:

• 描述: “即刻创建漂亮的 CSS3 驱动的动画。”

• 库大小: 16 kB

• GitHub: https://github.com/tictail/bounce.js

• 许可证:

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

AnimeJS

AnimeJS 是我们榜单上唯一的新成，但自创作以来的12个月里，它赢得了众多的粉丝。它非常通用，功能强大，而且它也可以为 HTML 游戏动画提供动力。唯一真正的问题是，对于简单的 web 应用来说，它是否过度？

也许吧。但是，由于它的速度也很快，而且相对容易学习，所以很难找到它的缺点。

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

该项目可在 GitHub 上获得。

• 创建者: Julian Garnier

• 发布: 2016

• 当前版本:

• 受欢迎程度:

• 描述: “JavaScript 动画引擎。”

• 库大小: 16 kB

• GitHub: https://github.com/juliangarnier/anime

• 许可证:

最令人印象深刻的是，Anime.JS 有令人惊叹的“文档”，演示 HTML，JavaScript 代码 和在一个漂亮的应用环境中使用案例。

简而言之，如果您对 JavaScript 动画解决方案很满意，那么就很难找到忽略 Anime.JS 的理由。

Magic Animations

Magic Animations 是最令人印象深刻的动画库之一，它有许多不同的动画，其中有许多是该库独有的。与 Animate.css 一样，你只需导入 Magic 的 CSS 文件即可。你也可以在 jQuery 中使用动画。该项目还提供了一个非常酷的演示程序。

• 当前版本:

• 受欢迎程度:

• 描述: “具有特效的CSS3动画”

• 库大小: 36.5 kB

• GitHub: https://github.com/miniMAC/magic

• 许可证:

与 Animate.css 相比，Magic Animations 文件的大小适中。它的签名动画，如 magic 效果，foolish 效果和 bomb 效果非常有名。

如果你正在寻找一些不寻常的效果，我绝对会建议你在你的下一个项目中给这个动画库一个机会。肯定不会令你失望的。

DynCSS

DynCSS 是一个视差效果的动画库，你可能喜欢在你的网站上使用这种效果。为了更清楚地了解如何使用这个库，看看这个demo。

• 创建者: Vittorio Zaccaria

• 发布: 2014

• 当前版本:

• 受欢迎程度:

• 描述: “使用动态 CSS 让你的网站活起来。”

• GitHub: https://github.com/vzaccaria/DynCSS

• 许可协议:

DynCSS 是一个简单的库，在不久的将来可能会变得流行起来，但是它现在是一个相当新的项目，正如它在GitHub上的星星数量所展示的那样。这个库提供的一个很酷的功能是当滚动时给元素添加旋转效果，Vittorio 在 DynCSS 主页上展示了精湛的效果(这为视差相关的页面提供了一个完美的用例)。

CSShake

CSShake 提供了一个专门用于在网页中震荡元素的 CSS 库。正如您所期望的那样，您可以使用多种不同的变化来对 web 组件进行震荡。

• 当前版本:

• 受欢迎程度:

• 库大小: 78.8 kB

• GitHub: https://github.com/elrumordelaluz/csshake

• 许可协议:

当用户输入不正确的时，苹果就会震荡某个 UI 元素(对话框，模态或文本框)以响应，就好像模仿一个人摇头表示 “不” 。CSShake 提供了一系列有趣的震荡动画，并且在这个库中变化不大（注：效果相近）。

尽管目前，这个库比 DynCSS 更受欢迎，但我觉得可能因其增加了很多不必要的功能而使文件过大。虽然动画灵活的，但是我想不出太多的用例，在这些情况下，你仍然需要包含 DynCSS 动画库来进行非震荡的效果。

但也许只是我缺乏想象力？

Hover.css

Hover.css 是一个 CSS 动画库，专为你的网站中使用的按钮和其他UI元素而设计。它有非常好的 2D 转换，还有许多其他精心制作的动画。

• 当前版本:

• 受欢迎程度:

• 描述: “轻松应用于于自己的元素，修改或仅用于灵感。”

• 库大小: 104.2 kB

• GitHub: https://github.com/IanLunn/Hover

• 许可协议:

Hover.css 最适合用于页面中的小元素，例如按钮、Logo、SVG组件 或 要突显的图像，而不是更大、更复杂的页面动画。它有一个完整的动画案例列表，它的体积相对较大（但是，我仍然觉得这个体积可以更优化）。可以说，它最引人注目的动画效果是它独特的speech bubbles 和 curls 。

Velocity.js

Velocity.js 是另一种高级的、功能齐全的 JavaScript 动画套件，包括诸如淡入淡出、滚动、滚动、停止、结束、翻转等动画效果。

目前，它拥有一大批知名的公司用户，包括 Tumblr、WhatsApp、MailChimp、Scribd、Gap 和 HTC，因此你知道，这个类库已经经过了针对大型用户群和怪异边缘情况进行了测试。

• 创建者: Julian Shapiro

• 发布: 2014

• 最近更新:

• 受欢迎程度:

• 描述: “加速JavaScript动画。”

• 库大小: 34.8 kB

• GitHub: https://github.com/julianshapiro/velocity

• 许可证:

Velocity 可能并不适合某些人，因为它是一个 JavaScript 动画引擎，它实际上是一个使用与 jQuery 的 $.animate() 相同API的动画引擎。他既可以通过 jQuery 使用，也可以不通过 jQuery 使用。也就是说，它的速度非常快，它的特点包括 color animation, transforms, loops, easing – 从本质上来说，它是 jQuery 和 CSS transitions 最好组合。

AniJS

我们最后这个库独特的方法很有趣。AniJS 是一个动画库，它允许你用简单的‘sentence-like’语句为元素添加动画。
采取以下格式：

最后这个库因其独特的方法而非常有趣。AniJS是一个动画库，允许你用下面的格式为元素添加动画效果：

If click, On Square, Do wobble animated To .container-box

HTML 代码:

1. data-anijs="if: click, do: flipInY, to: .container-box">

如果你对 JavaScript 不太熟悉，这可能是进入JS编排动作的好方法。

• 创建者: anijs

• 发布: 2014

• 最近更新:

• 受欢迎程度:

• 描述: “一个动画库，无需编码即可提升网页设计。”

• 库大小: 10.5 kB

• GitHub: https://github.com/anijs/anijs

• 许可证:

AniJS 是一个功能是很合理的库。与其他动画库相比，它用于实现的格式是相当原始和与众不同的（其他许多库可能会发现非常规的使用）。

尽管如此，这个库还是值得一试，至少在你的项目中可以尝试一下。它可能缺乏一些竞争对手的整体实力和光环，但它有潜力会在未来越来越强大。

注：这里有一个 CSS3 动画集合项目，可以导出单个动画的 CSS3 样式，建议和 AniJS 配合使用。AniCollection

你应该选哪个库？

有许多动画库已经准备就绪，等待在您的项目中实现。上面列出的是一些具有最佳和最稳定的几个。

如果您正在寻找一个简单易用的强大的 CSS 解决方案。Animate.CSS 可能是最通用的、最适合使用的选项。

如果你正在寻找一个更完整、功能强大的JavaScript选项，VelocityJS 和 Anime.JS 不分伯仲。Velocity 目前拥有更多的动画实现 和 更大的使用量基础，但是对于 Anime.JS 这样一个新项目来说是令人难以置信的完美 和 令人激动的。目前，Anime.JS 美丽的文档可能足以赢得我们的青睐。

尽管在您的 web 应用程序中使用一个动画库可以提高交互性，但是过度使用它可能会违背用户的目的，并且经常使用户迷惑。请小心谨慎地使用它们。

• 上一篇：柯洁 vs AlphaGo 为什么让上海网站建设感到焦虑？
• 下一篇：上海网站建设中金融后台产品经验浅谈