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

这个css动画库包含了抖动、闪烁、弹跳、翻转、旋转、淡入淡出等多达 60 多种动画效果，这些效果能满足前端的日常需要，而且你也可以在上面进行改造。

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

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

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

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

下载之后就比较简单了

直接link引进去

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

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

CGLweb前端

bounce

function(){   //跟单：www.gendan5.com

flash

pulse

rubberBand

shake

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

flip

flipInX

flipInY

flipOutX

flipOutY

lightSpeedIn

lightSpeedOut

rotateIn

rotateInDownLeft

rotateInDownRight

rotateInUpLeft

rotateInUpRight

rotateOut

rotateOutDownLeft

rotateOutDownRight

rotateOutUpLeft

rotateOutUpRight

slideInUp

slideInDown

slideInLeft

slideInRight

slideOutUp

slideOutDown

slideOutLeft

slideOutRight

zoomIn

zoomInDown

zoomInLeft

zoomInRight

zoomInUp

zoomOut

zoomOutDown

zoomOutLeft

zoomOutRight

zoomOutUp

hinge

jackInTheBox

rollIn

rollOut

*{ 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;}

$(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)

}

});

});