这是个css3动画框架，现在很流行，在小动画效果有很多，使用的方式
p class="animated bounce">p>
一、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>html lang="en">head> meta charset="UTF-8"> title>animationtitle> link rel="stylesheet" href="./animate.css"> style> p{ width: 100px; height: 100px; margin: 100px; margin-bottom: 50px; background: #0ff0f0; } 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>body> p>p> input type="text"> input type="button" value="Animate it"> ｓｃｒｉｐｔ> var oBtn=document.getElementsByTagName("input")[1]; var oDiv=document.getElementsByTagName("p")[0]; var oText=document.getElementsByTagName("input")[0]; oBtn.onclick=function(){ oDiv.className="animated rollOut"; var arr=oDiv.className.split(" "); oText.value=arr[1]; setTimeout(function(){oDiv.className=""},1000); } ｓｃｒｉｐｔ>body>html>
