animate.css的使用

用法：

1.下载animate.css文件    

   官网：https://daneden.github.io/animate.css/

2.在Head中引入css文件

3.你想要哪个元素进行动画，就给那个元素添加上animated类 以及特定的动画类名，animated是每个要进行动画的元素都必须要添加的类,特定的动画类名到官网上查看你所需要的效果类名。

（1）jquery方式添加（批量添加）

eg:$("#dome").addClass('animated fadeInLeft');

不要忘记引入jquery文件

（2）直接在class中添加

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

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

5.你也可以在动画完成后，把动画类移除，以便可以再次进行同一个动画

$("#dome").addClass('animated  shake');

setTimeout(function(){

                 $("#dome").removeClass('animated  shake');

},3000)

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

---

eg:

JS:

$(document).ready(function(){

         $("ul>li").addClass('animated  shake');

});

CSS:

ul{

     margin-left:50px;

     border:solid1px;

}

ul>li:nth-child(2){

     animation-delay:.2s;

}

ul>li:nth-child(3){

    animation-delay:.4s;

}

ul>li:nth-child(4){

    animation-delay:.6s;

}

ul>li:nth-child(5){

    animation-delay:.8s;

}

Html:

ul li 组成