html css animate,animate.css

这是个css3动画框架，现在很流行，在小动画效果有很多，使用的方式

div>/*只要修改bounce这个类就可以*/

一、atention Seekers

1、bounce

2、flash

3、pulse

4、rubberBand

5、shake

6、swing

7、tada

8、wobble

9、jello

二、Bouncing Entrances

1、bounceIn

2、bounceInDown

3、bounceInLeft

4、bounceInRight

5、bounceInUp

三、Bouncing Exits

1、bounceOut

2、bounceOutDown

3、bounceOutLeft

4、bounceOutRight

5、bounceOutUp

四、Fading Entrances

1、fadeIn

2、fadeInDown

3、fadeInDownBig

4、fadeInLeft

5、fadeInLeftBig

6、fadeInRight

7、fadeInRightBig

8、fadeInUp

9、fadeInUpBig

五、Fading Exits

1、fadeOut

2、fadeOutDown

3、fadeOutDownBig

4、fadeOutLeft

5、fadeOutLeftBig

6、fadeOutRight

7、fadeOutRightBig

8、fadeOutUp

9、fadeOutUpBig

六、Flippers

1、flip

2、flipInX

3、flipInY

4、flipOutX

5、flipOutY

七、Lightspeed

1、lightSpeedIn

2、lightSpeedOut

八、Rotating Entrances

1、rotateIn

2、rotateInDownLeft

3、rotateInDownRight

4、rotateInUpLeft

5、rotateInUpRight

九、Rotating Exits

1、rotateOut

2、rotateOutDownLeft

3、rotateOutDownRight

4、rotateOutUpLeft

5、rotateOutUpRight

十、Sliding Entrances

1、slideInUp

2、slideInDown

3、slideInLeft

4、slideInRight

5、slideOutUp

6、slideOutDown

7、slideOutLeft

8、slideOutRight

十一、Zoom Entrances

1、zoomIn

2、zoomInDown

3、zoomInLeft

4、zoomInRight

5、zoomInUp

十二、Zoom Exits

1、zoomOut

2、zoomOutDown

3、zoomOutLeft

4、zoomOutRight

5、zoomOutUp

十三、specials

1、hinge

2、rollIn

3、rollOut

奉上测试代码：

DOCTYPE html>

animationtitle>

}input[type="text"]{outline:none;width:188px;height:48px;border:2px solid #888;border-radius:10px;text-align:center;font-weight:bold;font-size:16px;margin-left:55px;

}input[type="button"]{width:120px;height:40px;font-family:"黑体";text-align:center;font-weight:bold;outline:none;border:2px solid #00FFFF;background:#fff;color:#00FFFF;font-size:14px;cursor:pointer;border-radius:5px;margin-left:50px;

}

style>

head>

div>

varoBtn=document.getElementsByTagName("input")[1];varoDiv=document.getElementsByTagName("div")[0];varoText=document.getElementsByTagName("input")[0];

oBtn.οnclick=function(){

oDiv.className="animated rollOut";vararr=oDiv.className.split(" ");

oText.value=arr[1];

setTimeout(function(){oDiv.className=""},1000);

}script>

body>

html>