animate.jpg

很多网站产品页面都有一个动态效果，当页面向下滚动的时候，页面中的各个元素会加载一些细微的动画。这样做可以让页面载入看起来更具有视觉冲击，并且更好的将用户的视觉焦点引导至页面对应的位置。想要实现这类效果需要利用CSS3中提供的animation属性，让页面元素发生位移变化。当然相对于自己写，有一种更简便的办法，利用现成的样式文件类库就可以轻松实现，并且美观高效；

因为觉得有必要将内容详细整理一下，就将文章内容分成了两篇，分别介绍Animate和wow的使用；这一篇先来整理Animate。

Animate.css是一款利用CSS3中animation创建的，为动画而生的样式库；其中内置了几十种动画效果。通过调用Animate可以非常简单快速的创建页面动画。

Animate.css的使用：

1、从Animate.css官网直接下载样式文件，网站同时还提供了相应的样式效果预览；

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

2、将样式文件引入页面； 

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

3、直接在页面样式中调用类名，其中animated这个类名是必须添加的，后面则是具体的样式效果类名；

<div class="animated fadeInLeft">
    <img src="exp.jpg"/>
</div>

动画类名称如下：

Class Name
bounce flash pulse rubberBand
shake headShake swing tada
wobble jello bounceIn bounceInDown
bounceInLeft bounceInRight bounceInUp bounceOut
bounceOutDown bounceOutLeft bounceOutRight bounceOutUp
fadeIn fadeInDown fadeInDownBig fadeInLeft
fadeInLeftBig fadeInRight fadeInRightBig fadeInUp
fadeInUpBig fadeOut fadeOutDown fadeOutDownBig
fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig
fadeOutUp fadeOutUpBig flipInX flipInY
flipOutX flipOutY lightSpeedIn lightSpeedOut
rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft
rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight
rotateOutUpLeft rotateOutUpRight hinge jackInTheBox
rollIn rollOut zoomIn zoomInDown
zoomInLeft zoomInRight zoomInUp zoomOut
zoomOutDown zoomOutLeft zoomOutRight zoomOutUp
slideInDown slideInLeft slideInRight slideInUp
slideOutDown slideOutLeft slideOutRight slideOutUp
heartBeat

除了使用默认的效果外，如果觉得不满意，还可以对效果进行自定义，比如设置效果延迟和速度；使用方法同样是在样式中添加对应的Delay Class 和Slow, Slower, Fast, and Faster Class。

<div class="animated bounce delay-2s">Example</div>
/* delay-2s 2s; delay-3s 3s; delay-4s 4s; delay-5s 5s */
<div class="animated bounce faster">Example</div>
/* slow 2s; slower 3s; fast 800ms; faster 500ms */

除了基本的调用方法外，还可以使用动态调用，通过给JS添加或删除class，可以实现动态效果：

<button id="btn1">添加</button>
<button id="btn2">移除</button>
<div id="box" class="box"></div>
<script>
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oBox = document.getElementById('box');
oBtn1.onclick = function(){
  oBox.classList.add('animated');
  oBox.classList.add('flash');
}
oBtn2.onclick = function(){
  oBox.classList.remove('flash');
}
</script>

如果动画是无限播放的，可以添加 class infinite。

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

$(function(){
    $('#dowebok').addClass('animated bounce');
});

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

$(function(){
    $('#dowebok').addClass('animated bounce');
    setTimeout(function(){
        $('#dowebok').removeClass('bounce');
    }, 1000);
});

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

#dowebok {
    animate-duration: 2s;    //动画持续时间
    animate-delay: 1s;    //动画延迟时间
    animate-iteration-count: 2;    //动画执行次数
}

注意添加浏览器前缀。

参考引用：
https://github.com/daneden/animate.css
http://www.dowebok.com/98.html
https://www.cnblogs.com/xiaohuochai/p/7372665.html