如何使用animate.css

html-css011

如何使用animate.css,第1张

animate.css是一个css3动画库,可以到github上去下载,里面预设了很多种常用的动画,可以先在本页看下演示效果,使用也很简单,因为它是把不同的动画绑定到了不同的类里,所以我们想要使用哪种动画的时候,只需要简单的把那个相应的类添加到元素上就行了:

首先在head中引入下载的animate.css文件

然后你想要哪个元素进行动画,就给那个元素添加上animated类 以及特定的动画类名,animated是每个要进行动画的元素都必须要添加的类。

假设使用jquery,要给一个id为demo的元素添加一个摇动的动画,因为摇动的动画类名为shake

这样载入页面,元素就能动起来了。你也可以在动画完成后,把动画类移除,以便可以再次进行同一个动画。

至于动画的配置参数,比如动画持续时间,动画的执行次数等等,你可以在你的的元素上自行定义,覆盖掉animate.css里面所定义的就行了。

注意这些属性还要记得加上各浏览器的前缀。

总之是很灵活的,说到底不就是一个css文件吗,一看就懂的,你在里面想怎么整就怎么整,不想用它提供的类名,就在里面改掉就行了。如果你只想用里面的部分动画,也可以把那些要使用的动画分离出来,它的官网也提供了这样的功能。

css3 animation与jQuery animate()区别在于实现机制不同:

1.css3中的过渡和animation动画都是基于css实现机制的,属于css范畴之内,并没有涉及到任何语言操作。效率略高与jQuery中的animate()函数,但兼容性很差。

2.jQuery中的animate()函数可以简单的理解为css样式的“逐帧动画”,是css样式不同状态的快速切换的结果。效率略低于css3动画执行效率,但是兼容性好。‍

推荐在兼容性要求不是很高的情况下尽量使用css3动画,在需要兼容性很好并且有复杂的事件响应的情况下使用jQuery中的animate()函数。