欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

 身为程序员,即便你做后台系统的开发,页面效果可能没有那么高的要求,但有的时候为了增加点乐趣,加点动画效果也很不错的,当然你可以用CSS3的transition自己写,也不复杂,但有个现成直接可以用的,而且还免费,是不是更好一些,今天给大家推荐animate.css这个动画库,简单易用,很方便。

推荐一款免费强大好用的css3动画库,程序员用来做网页元素动画

 

第一步,引入样式文件

在head中引入animate的样式文件,中间有个min单词,十年前写js和css文件的时候还没这东西,三年前重新写的时候,突然发有的样式文件有min,查了查原来是mini的意思,压缩后的文件,这样不影响使用,但文件更小。

推荐一款免费强大好用的css3动画库,程序员用来做网页元素动画

 

或者你也可以使用bower和npm来安装,或者使用cdn。

推荐一款免费强大好用的css3动画库,程序员用来做网页元素动画

 

第二步,使用

异常的简单,在js中为你的元素加一个类就可以,animated是必须的,bounceOutLeft是可变的参数。

推荐一款免费强大好用的css3动画库,程序员用来做网页元素动画

 

支持的动画

看了这么多css的动画,animate支持的动画比较偏向基础的那种,

推荐一款免费强大好用的css3动画库,程序员用来做网页元素动画

 

使用中的问题

本来以为一个动作直接触发js中的addClass就可以了,没想到再次点就没了效果,研究了半天,原来如果要想在一个页面再次触发动作,需要把相关的class去掉,调用removeClass即可,我直接用了最笨的办法,设置了一个定时,settimeout一秒后删除想着的样式动作。

推荐一款免费强大好用的css3动画库,程序员用来做网页元素动画

 

彩蛋

看下面这个,another thing from Daniel Eden,然后打开它。

推荐一款免费强大好用的css3动画库,程序员用来做网页元素动画

 

然后你会发现,这家伙居然是facebook的设计师。

推荐一款免费强大好用的css3动画库,程序员用来做网页元素动画

 

后计

用了这个动画插件用了三年了,还真不知道这个的作者,还以为是个机构的出品,最近网站的主页也被更新了,其实更喜欢以前的效果。网上这类的特效很多,animate提供的样式只能算最基本的,可以配合其它css动画一起用。

小伙伴们,你们用的是哪个动画库呢?

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c50724.shtml