css3 updown 动画,CSS3 Animation动画库animate.css的使用

使用方法：

1.引入css样式

2.给要动画的元素加上class animated，如果想无限循环动画，可加上class infinite.(animated是每个要进行动画的元素都必须要添加的类)

3.再给要执行动画的元素加上你需要的动画类class. 如下：

bounce

flash

pulse

rubberBand

shake

swing

tada

wobble

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

rollIn

rollOut

zoomIn

zoomInDown

zoomInLeft

zoomInRight

zoomInUp

zoomOut

zoomOutDown

zoomOutLeft

zoomOutRight

zoomOutUp

slideInDown

slideInLeft

slideInRight

slideInUp

slideOutDown

slideOutLeft

slideOutRight

slideOutUp

例如:

Example

你也可以使用jQuery为元素添加动画类：

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

你也可以检测动画结束时：

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

例如：

$("#testAnimation").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",function(){

$(this).removeClass("testAnimation").addClass("bounce");

});

$("#testAnimation").addClass('Anmiation').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){

$(this).removeClass('Anmiation');

});

你也可以改变你的动画的持续时间，增加延迟或改变它的次数：

#yourElement {

-vendor-animation-duration: 3s;

-vendor-animation-delay: 2s;

-vendor-animation-iteration-count: infinite;

}

注意：一定要加上特定浏览器的前缀(webkit,moz等)。

如果你不想使用它提供的class只想使用动画，可以把这部分你需要的动画从CSS里复制分离出来。

animation属性有以下这些

例如：

div

{

animation-name: myfirst;

animation-duration: 5s;

animation-timing-function: linear;

animation-delay: 2s;

animation-iteration-count: infinite;

animation-direction: alternate;

animation-play-state: running;

}

或者可以简写为：

div{animation: myfirst 5s linear 2s infinite alternate;}

简写的语法：

animation: name duration timing-function delay iteration-count direction;