首先在head中引入下载的animate.css文件
然后你想要哪个元素进行动画,就给那个元素添加上animated类 以及特定的动画类名,animated是每个要进行动画的元素都必须要添加的类。
假设使用jquery,要给一个id为demo的元素添加一个摇动的动画,因为摇动的动画类名为shake
这样载入页面,元素就能动起来了。你也可以在动画完成后,把动画类移除,以便可以再次进行同一个动画。
至于动画的配置参数,比如动画持续时间,动画的执行次数等等,你可以在你的的元素上自行定义,覆盖掉animate.css里面所定义的就行了。
注意这些属性还要记得加上各浏览器的前缀。
总之是很灵活的,说到底不就是一个css文件吗,一看就懂的,你在里面想怎么整就怎么整,不想用它提供的类名,就在里面改掉就行了。如果你只想用里面的部分动画,也可以把那些要使用的动画分离出来,它的官网也提供了这样的功能。
在使用animate.css会做移动端的css动画,PC端的结合jquery.fullpage.js就能做一个全屏滚动的企业网站,但初始状态下需要隐藏有动画的元素
可以给animated类添加opacity:0属性 ,动画在开始状态是隐藏的,当动画元素出现在屏幕可视区域,动画会自动执行,执行完动画会保持最后一个状态不变,也就是不会隐藏,但使用是有前提的!!敲重点
在animate.css中能使用这种方法的动画类名只有和fadeIn相关的才能用 ,fadeIn、fadeInUp、fadeInDown、fadeInLeft、fadeInRight都可以使用
像slideInUp这些slideIn相关的都不能使用