UI.

10个最佳的免费动画库

杰克罗奇勒斯 经过 杰克罗奇勒斯  |  2018年1月22日

动画是2018年的关键趋势之一,但您不必重新发明轮子以向您的网站添加移动。我们查看Web项目的最佳动画库。

你可以用来建造一些疯狂的东西 ui动画 在网上。这很快成为现代网站的常态,用户订婚是一个大的交易。

如果你环顾四周,你会发现很多代码生成器和 自定义工具 帮助动画。但是,您还可以找到免费的库,即在编码过程中节省您的时间。

这些是我最佳开源Web动画库的10个选择。这包括JavaScript库和仅CSS的动画的良好组合。这两个风格都很棒,他们都有自己的好处和缺点。

无论我保证这个列表都会有一些你会喜欢的东西。

 

1. GSAP.

GSAP库 是开发人员可用的最酷的免费资源之一。它纯粹在javascript上运行,它是您可以使用的更强大的动画库之一。

它适用于HTML5规格的顶部,并与所有现代浏览器一起播放,更不用说该团队不断更新这个库的新功能。它可以使用SVGS,Canvas元素,甚至是jQuery对象以及与其他相关库一起使用 Easeljs..

如果您需要强大的Web动画库,肯定值得研究。这也可以处理简单的任务,但是有很多较小的图书馆,你可以尝试那些。

01-GSAP-Green-Socks-Animation

 

2.动漫.JS.

当我第一次找到的时候 anime.js. 图书馆我被地板。这件事是非常强大的,它超越了简单的UI / UX动画。

使用Anime.js,您可以使用徽标,按钮,图像设计美学动画,您将其命名为。这支持所有典型的用户触发器,如Click / Hover / Swipes,您可以访问一系列的自定义动画。

如果你看看 文件 您实际上可以找到嵌入到页面中的一堆示例。加上一个 CODEPEN上的集合 充满了动漫.JS示例仔细阅读。

02-anime-js-logo

 

3.邪恶的CS

这是一个具有焦点纯CSS代码的较新图书馆之一。 邪恶的CSS 在CSS3的顶部工作,提供一些非常令人难以置信的结果。

从主页面上,您可以找到一堆现场演示,您可以在浏览器中进行测试。这些包括对象旋转,翻转,滑动等等类似的动画效果。

其中一些可能很简单,你可以自己建造它们。但其他人得到真正的综合体,这就是让邪恶的CSS图书馆如此乐趣。

03-Wicked-CSS3-Library

 

4.动画CSS.

也许是Web动画的最终资源是 Animate.css.。这个开源库已经释放了几年后,它比以往任何时候都更加相关。

Developer Daniel Eden将此项目创建为简化方法,将自定义CSS3动画添加到网页上。多年来,它已成为一个拥有足够权力的完全成熟的动画库,以在任何重大项目上运行。

主页提供了大量的演示,因此您可以测试动画样式并查看您的想法。加上有一堆很棒的文件 在GitHub上 包括类列表和一些示例代码片段。

04-Animate-CSS

 

5.星期二

我最喜欢的一件事 周二 是个 简单 这些动画。使用此库,您可以控制元素的出现和消失在页面上。

但这些动画不是顶部或超级迷人。相反,他们打包了一个很好的微妙打孔,真正改善了页面美学,但不会减损内容或用户体验。

我星期二没有看到许多网站,但它也许是最清洁的图书馆。

它在纯CSS上运行,动画样式是如此的合理。他们可以与任何网站混合,你已经过了十几个淡出/淡出样式。

05-星期二-CSS-Animation

 

6. CSShake.

我还没有看到任何CSS图书馆作为乐趣或奇怪 CSS.hake.。这是一个疯狂的一部分,一个部分独特,所以它可能不适合每个网站。

它所做的名单是因为我无法想到具有这些功能的任何类似的库。使用CSShake,您可以通过所有类型的样式振动效果来激发悬停动作,所有类型的样式都在纯CSS上运行。

从温和的运动到剧烈的摇晃和一切彼此,这个图书馆拥有一个非常容易的启动。

06-CSShake-Shaking-Animations

 

7. Mo.js.

出于我要说的众多详细的JavaScript库,我要说 Mo.js. 是最好的。这个图书馆是巨大的,它真的为 动态图形 超过UI / UX动画。

但如果您了解它是如何工作的,您可以为任何内容使用此功能。守则非常简单,可以操纵和有一个 束教程 你可以遵循让你的生活更轻松。

这是完美的动画库吗?几乎不。

但它确实有 很多 无论您是动画导航栏,徽标还是其他复杂对象,它真的简化了动画过程。

07-Mo-JS-Library

 

8.动画加

用于超级轻型易于轻盈的动画库退房 动画加。这仅在缩小时重2KB,并且它得到了您希望自定义JavaScript动画的所有基本功能。

使用NPM易于安装,您可以在GitHub上的代码片段后设置它。其中大多数都只是基本的演示,因此他们没有进入任何复杂的东西,但您也可以在GitHub上找到所有选项和回调方法。

看一下 这个样本演示 直接从主仓库中的代码片段拉动。这并不多,但它会向您展示如何设置动画加上,并从头开始运行一些默认代码。

08-Animate-Plus-Library

 

9. Bounce.js.

弹跳 只需点击次点击,您可以制作功能强大的CSS3和JS动画。

在主页上,您将在Modules上找到一个自定义动画构建器。这样,您可以添加要在页面上的特定动画功能,而无需添加额外的代码。

与弹跳的最大区别是它不仅仅是图书馆。虽然你可以找到设置信息 在GitHub上,这不仅仅是一个基本脚本。它实际上附带了一个Web Builder,所以反弹是你可以在浏览器中风格化的少数动画库之一。

09-bounce-js-script

 

10.魔术

有趣的动画带着短暂的嬉戏者最能描述 魔法 library.

此整个集合侧重于CSS3动画,同时按下无法在其他地方找到的自定义样式。这是一个非常大的CSS3代码集合,你也会在这里找到很多整洁的技巧。旋转,透视翻转,褪色效果,很多。

如果你看看 演示页面 您可以在行动中查看一些这些效果。

授予此库仍然比其他CSS3库要小得多,因此它无法与周二或动画.CSS竞争。但它有很多简洁的网页动画,你只是在其他图书馆里找到。

10-Magic-CSS-Animation-Library