使用animate.css做动画效果

Animate.css是一个很好的css动画库，但是由于浏览器支持原因，所以只支持ie10+的浏览器，所以一般都用在移动端。

ANIMATE.CSS 和 WOW.JS

最经典好用的组合：

<section class="wow slideInLeft"></section>
<section class="wow slideInRight"></section>

然后使用 new WOW.init()
复杂一点的用法：

var wow = new WOW(
  {
    boxClass:     'wow',      // animated element css class (default is wow)
    animateClass: 'animated', // animation css class (default is animated)
    offset:       0,          // distance to the element when triggering the animation (default is 0)
    mobile:       true,       // trigger animations on mobile devices (default is true)
    live:         true,       // act on asynchronously loaded content (default is true)
    callback:     function(box) {
      // the callback is fired every time an animation is started
      // the argument that is passed in is the DOM node being animated
    },
    scrollContainer: null // optional scroll container selector, otherwise use window
  }
);
wow.init();

简单一点的用法：

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>
<section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></section>

data-wow-offset设置元素离window顶端距离多少开始执行动画，data-wow-iteration设置动画执行次数，data-wow-delay、data-wow-duration分别设置元素动画执行的延迟和执行时长，要带单位s。

没什么过多的用法，但是效果确实很好看。

单独使用ANIMATE.CSS

单独使用animate.css的话，和之前配合wow使用是不一样。

<section class="animated bounceInLeft"></section>

这个是直接执行，而且只有一遍，打开网页马上就执行了。一般不是我们要的效果，怎么样控制它的执行呢？可以有两种方法：

使用 display：none;
一般我们开始不希望某个元素出现，所以在它的css上设置display：none，然后我们在需要它出现的时候修改它的display为其他的值，只要不是none，它都会用动画的效果出现。

滞后添加动画类，如果希望元素之前就已经出现了，但是再出现以后是有一个动画效果，比如bounce抖动一下啊什么的，你就可以这么置：

<section class="animated"></section>

然后在你需要的时候，添加一个动画class上去，比如bounce，那么它就会立马执行一次动画效果。但是根据不同的元素添加不同的class操作起来比较麻烦，所以我们可在用data属性存储要使用的class：

<section id="anyid" class="animated" data-animate="bounceInLeft"></section>

在需要的时候，用document.getElementById(“anyid”).dataset[“animate”]来获取存储在元素上的数据。之后再添加到元素的classList中，就可以了。