五月干货!10个值得前端收藏的CSS3动效库(工具) - 优设网 - UISDC

五月干货!10个值得前端收藏的CSS3动效库(工具)

2016/05/01 18030评论区

best-css3-animation-library-1

现在的网站和App的设计中越来越重视用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用。我一般会在网站中加入一些简单而一致的动效,我所用的技术则是用SASS+bourbon来生成出那些基于CSS3的动画效果来。但如果你对CSS3中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话,你可以参考并使用下面的这10个优秀动效库(工具)。

1. Animate.css

Animate.css是我比较喜欢的一个CSS3动效库,非常适合那些对CSS3动画效果不熟悉,但又希望给自己所做的网站或基于H5的APP引入动效的朋友。因为,你只需要给需要实现动效的元素添加上Animate.css中预定义的那些动效名称就可以了。比如常见的:bounce,flash,fadeIn,fadeOut等等,加起来有75种不同的动效,完全能够满足你的基本需要了。

当然对于这个库也有一些使用注意事项,比如你最好在给元素添加动效样式完成动效后,马上将这个动效样式去掉。另外,对于动效的时长,振动幅度等,你也需要做一些调整。因为,我感觉它默认设置中的动效过于快速和强烈了。Animate.css已经提供了详细的文档告诉你应该如何做这些调整。

2. Bounce.js

Bounce.js是一个能够生成CSS3动效的小工具,它是用JavaScript编写的,提供了一个Web界面,你可以添加一个组件然后就可以选择包括Scale,Translate,Rotate,Skew这些动效类型,然后分别设置它们的参数,当达到你想要的效果后,你可以将这个动效以CSS的方式导出,这样你就可以将它应用到你的应用中了。

9css20160501

3. CSS3 Animation

CSS3 Animation是一个非常简单易用的动效工具,你可以在它提供的简单图形界面里,通过拖拽一些进度条来控制你的动效,生成的CSS代码会自动显示在下面的一个文本框里,你可以拷贝粘贴到你的应用中直接使用。

8css20160501

4. CSS Animate

如果你觉得上面的工具还无法做出你想要的动效,那么可以看看CSS Animate这个工具。它能让你设置更多的动效参数,比如你可以同时设置动效起始和终止状态的坐标,大小,以及透明度,这样你就能够做出更加复杂的动效来。

7css20160501

5. Magic Animations

Magic Animations与Animate.css十分类似,也是一个预定义了一系列动效的CSS库。但与Animate.css的最大区别可能是,它定义的那些动效更炫也更酷一些,如果你的网站也很新潮,那可以考虑使用这个CSS动效库。

6css20160501

6.AniJS

AniJS是一个通过JavaScript控制的动效库。它允许你通过它的链式语法来定义动效。比如下面这个例子:当用户点击时这个元素会沿Y轴翻转。

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

5css20160501

7. Single Element CSS Spinners

我们经常会需要一些动效来表达系统处于加载或处理数据的过程中。Single Element CSS Spinners这个在GitHub上的项目,提供了一组非常漂亮的可用于加载的CSS3动效。

4css20160501

8.Snabbt.js

Sanbbt.js是我很喜欢的一个动效库,它非常小巧只有5K,所以可以被用在移动应用中。而且它也支持链式语法,你可以很方便地写出复杂的动效组合。

snabbt(element, {
  position: [200, 0, 0],
  easing: function(value) {
    return value + 0.3 * Math.sin(2*Math.PI * value);
  }
}).snabbt({
  position: [0, 0, 0],
  easing: 'easeOut'
});

3css20160501

9. Odometer

Odometer是用来给数字作动效的,比如通过它你可以很好地呈现网站人数的增加,倒计时等与数字相关的动画效果。

2css20160501

10.Hover.css

Hover.css提供了大量的Hover效果,包括2D变换,图标变换,背景变换等等。而且几乎可以应用于所有元素,包括链接,按钮,logo,SVG甚至图片等等。

1css20160501

作者微信号:

jjqr1

【优设四月人气过万的好文】

使用素材站:
《实用干货!11个人气超高的设计素材汇总网站》

自学UI设计的正确姿势:
《别着急学软件!先掌握科学有效的UI设计自学姿势(超全面)》

幽默有趣的前端小课堂:
《零基础也能看懂!写给设计师的前端小知识之网页排版(附实战)》

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量112万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/best-css3-animation-library

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 版式设计 界面设计 排版布局 职场 优设专访 设计师干货 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 设计规范 海报设计 设计趋势 用户体验设计 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里