Animate.css的使用方法，一个前端动画库

Animate.css是国外一个程序员《丹尼尔·伊登》所写的一个css动画库，这个css动画库包含了抖动、闪烁、弹跳、翻转、旋转、淡入淡出等多达 60 多种动画效果，这些效果能满足前端的日常需要，而且你也可以在上面进行改造。

因为Animate.css使用了CSS3的新属性，所以老版本的浏览器是不支持的，目前能被支持的浏览器有：IE10+、Firefox、Chrome、Opera、Safari。

加这个动画之后低版本的浏览器没有任何的bug，除了没有动画之外0.0

整个库压缩之前24KB，压缩之后最小能达到18kb，这个插件要是在移动端运行，是一个不错的选择，祝你们用的愉快。

Animate.css官网地址 ————-> 点击进入

Animate.css GitHub地址 ———> 点击进入

建议对GitHub不熟悉的可以直接进入官网下载。

下载之后就比较简单了

直接link引进去

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

然后在想要有动画的div上加两个class，一个是Animate.css的主要控制时间的animated，这个class是必须添加的，另一个是主要管理动画的比如（flipOutX、bounceIn、bounceOut等等）。

下面我简单的只做了一个例子，其实就是把所有的动画都在页面写了一遍，有兴趣的同学可以点击下方的运行看看。

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<div id="cenggel"><a href="http://cenggel.com/">CGLweb前端</a></div>
<div id="btn_box">
    <div date-class="animated bounce">bounce</div>
    <div date-class="animated flash">flash</div>
    <div date-class="animated pulse">pulse</div>
    <div date-class="animated rubberBand">rubberBand</div>
    <div date-class="animated shake">shake</div>
    <div date-class="animated swing">swing</div>
    <div date-class="animated tada">tada</div>
    <div date-class="animated wobble">wobble</div>
    <div date-class="animated jello">jello</div>
    <div date-class="animated bounceIn">bounceIn</div>
    <div date-class="animated bounceInDown">bounceInDown</div>
    <div date-class="animated bounceInLeft">bounceInLeft</div>
    <div date-class="animated bounceInRight">bounceInRight</div>
    <div date-class="animated bounceInUp">bounceInUp</div>
    <div date-class="animated bounceOut">bounceOut</div>
    <div date-class="animated bounceOutDown">bounceOutDown</div>
    <div date-class="animated bounceOutLeft">bounceOutLeft</div>
    <div date-class="animated bounceOutRight">bounceOutRight</div>
    <div date-class="animated bounceOutUp">bounceOutUp</div>
    <div date-class="animated fadeIn">fadeIn</div>
    <div date-class="animated fadeInDown">fadeInDown</div>
    <div date-class="animated fadeInDownBig">fadeInDownBig</div>
    <div date-class="animated fadeInLeft">fadeInLeft</div>
    <div date-class="animated fadeInLeftBig">fadeInLeftBig</div>
    <div date-class="animated fadeInRight">fadeInRight</div>
    <div date-class="animated fadeInRightBig">fadeInRightBig</div>
    <div date-class="animated fadeInUp">fadeInUp</div>
    <div date-class="animated fadeInUpBig">fadeInUpBig</div>
    <div date-class="animated fadeOut">fadeOut</div>
    <div date-class="animated fadeOutDown">fadeOutDown</div>
    <div date-class="animated fadeOutDownBig">fadeOutDownBig</div>
    <div date-class="animated fadeOutLeft">fadeOutLeft</div>
    <div date-class="animated fadeOutLeftBig">fadeOutLeftBig</div>
    <div date-class="animated fadeOutRight">fadeOutRight</div>
    <div date-class="animated fadeOutRightBig">fadeOutRightBig</div>
    <div date-class="animated fadeOutUp">fadeOutUp</div>
    <div date-class="animated fadeOutUpBig">fadeOutUpBig</div>
    <div date-class="animated flip">flip</div>
    <div date-class="animated flipInX">flipInX</div>
    <div date-class="animated flipInY">flipInY</div>
    <div date-class="animated flipOutX">flipOutX</div>
    <div date-class="animated flipOutY">flipOutY</div>
    <div date-class="animated lightSpeedIn">lightSpeedIn</div>
    <div date-class="animated lightSpeedOut">lightSpeedOut</div>
    <div date-class="animated rotateIn">rotateIn</div>
    <div date-class="animated rotateInDownLeft">rotateInDownLeft</div>
    <div date-class="animated rotateInDownRight">rotateInDownRight</div>
    <div date-class="animated rotateInUpLeft">rotateInUpLeft</div>
    <div date-class="animated rotateInUpRight">rotateInUpRight</div>
    <div date-class="animated rotateOut">rotateOut</div>
    <div date-class="animated rotateOutDownLeft">rotateOutDownLeft</div>
    <div date-class="animated rotateOutDownRight">rotateOutDownRight</div>
    <div date-class="animated rotateOutUpLeft">rotateOutUpLeft</div>
    <div date-class="animated rotateOutUpRight">rotateOutUpRight</div>
    <div date-class="animated slideInUp">slideInUp</div>
    <div date-class="animated slideInDown">slideInDown</div>
    <div date-class="animated slideInLeft">slideInLeft</div>
    <div date-class="animated slideInRight">slideInRight</div>
    <div date-class="animated slideOutUp">slideOutUp</div>
    <div date-class="animated slideOutDown">slideOutDown</div>
    <div date-class="animated slideOutLeft">slideOutLeft</div>
    <div date-class="animated slideOutRight">slideOutRight</div>
    <div date-class="animated zoomIn">zoomIn</div>
    <div date-class="animated zoomInDown">zoomInDown</div>
    <div date-class="animated zoomInLeft">zoomInLeft</div>
    <div date-class="animated zoomInRight">zoomInRight</div>
    <div date-class="animated zoomInUp">zoomInUp</div>
    <div date-class="animated zoomOut">zoomOut</div>
    <div date-class="animated zoomOutDown">zoomOutDown</div>
    <div date-class="animated zoomOutLeft">zoomOutLeft</div>
    <div date-class="animated zoomOutRight">zoomOutRight</div>
    <div date-class="animated zoomOutUp">zoomOutUp</div>
    <div date-class="animated hinge">hinge</div>
    <div date-class="animated jackInTheBox">jackInTheBox</div>
    <div date-class="animated rollIn">rollIn</div>
    <div date-class="animated rollOut">rollOut</div>
</div>
<style type="text/css">
    *{ margin:0; padding:0;}
    #btn_box{ width:100%; overflow:hidden; height:1900px;}
    #btn_box div{ width:31%; margin:30px 1%; background:#409fb6; color:#fff; text-align:center; height:40px; line-height:40px; font-size:20px; font-weight:bold; float:left; cursor:pointer;}
    #cenggel{text-align:center; font-size:20px; line-height:40px;}
    #cenggel a{ color:#000;}
    .animated{ background:#409F81 !important; z-index:132;}
</style>
<script type="text/javascript">
    $(document).ready(function () {
        var cgl_on_off = true;
        $('#btn_box div').click(function(){
            if (cgl_on_off){
                var class_get = $(this).attr('date-class');
                $(this).addClass(class_get);
                cgl_on_off = false;
                setTimeout(function(){
                    $('#btn_box div').attr('class','')
                    cgl_on_off = true;
                },1500)
            }
        });
    });
</script>

运行

百度下载地址：

链接：https://pan.baidu.com/s/1gfhaPz1

密码：hpzi