动画插件—animate.css的使用

效果图的演示和插件的下载

附上官网的GitHub地址：https://github.com/daneden/animate.css

 第一种使用的方法

 

1. 页面引入插件

在你的index.html页面中引入这两个文件

<link rel="stylesheet" href="lib/animate/animate.css">
<script src="lib/animate/wow.min.js"></script>

2.写js代码

在js中写下面这句：

$(function(){
 //动画效果         
  new WOW().init();
});

•  

3. 在html页面中添加动画

在index.html页面中找到需要添加动画效果的对象。如果是一大块内容，就直接找最靠近它并且包围它的大盒子，给盒子添加类：class="wow 动画效果"，具体参考下面代码：

bounce是动画效果，根据自己需要添加    效果参考：animate.css各种动画效果

<nav class="wow bounce"></nav>
你也可以添加一个或几个属性如下：
<nav class="wow bounce" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10"></nav>

属性： 
data-wow-duration=”2s” 即：动画用2秒钟执行完。 
data-wow-delay=”5s” 即：动画延迟5秒执行。 
data-wow-offset=”10” 即： 距离可视区多远开始执行动画。 
data-wow-iteration=”10” 即：重复次数。

第二种使用的方法

1、引入文件

<link rel="stylesheet" href="animate.min.css">

2、HTML 及使用

<div class="animated bounce" id="dowebok"></div>

      给元素加上 class 后，刷新页面，就能看到动画效果了。animated 类似于全局变量，它定义了动画的持续时间；bounce 是动画具体的动画效果的名称，你可以选择任意的效果。如果动画是无限播放的，可以 在class后面添加 infinite。

还有jQuery对该插件的一些操作

如果说想给某个元素动态添加动画样式，可以通过jquery来实现：

$('#yourElement').addClass('animated bounceOutLeft');

当动画效果执行完成后还可以通过以下代码添加事件

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

你也可以通过 JavaScript 或 jQuery 给元素添加这些 class，比如：

$(function(){

    $('#jq22').addClass('animated bounce');

});

有些动画效果最后会让元素不可见，比如淡出、向左滑动等等，可能你又需要将 class 删除，比如：

$(function(){

    $('#jq22').addClass('animated bounce');

    setTimeout(function(){

        $('#jq22').removeClass('bounce');

    }, 1000);

});

animate.css 的默认设置也许有些时候并不是我们想要的，所以你可以重新设置，比如：

#jq22{

    animate-duration: 2s;    //动画持续时间

    animate-delay: 1s;    //动画延迟时间

    animate-iteration-count: 2;    //动画执行次数

}