animate.css 是一款基本CSS3的動畫樣式插件，它定義了多種動畫效果，見：http://www.jq22.com/yanshi819
給元素加入相應的樣式類，即可賦於動畫效果，非常easy！
1、 添加動畫樣式，實現動畫效果：
1 <div class="demo animated bounce"></div>
說明:
a) 樣式 animated 指定它是一個動畫元素。
b) 樣式 bounce 指明它的動畫效果。
2、元素動畫是可以監聽的：
1 // 監聽動畫開始執行事件 2 $('#OBJ').bind('animationstart webkitAnimationStart mozAnimationStart MSAnimationStart oanimationstart', function(){ 3 // ... 4 }); 5 6 // 監聽動畫執行結束事件 7 $('#OBJ').bind('animationend webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend', function(){ 8 // ... 9 });
3、采用js動態添加動畫：
1 $('#OBJ').addClass('animated fadeInUp');
4、在和wow.js混用時，如果想采用js動態添加動畫時，必須先清除屬性style，不然無法實現動畫效果：
1 $('#OBJ').bind('animationend -ms-animationend -moz-animationend -webkit-animationend -o-animationend', function(){ 2 $(this).removeClass('animated'); 3 $(this).removeClass('bounce'); 4 $(this).removeClass('flash'); 5 $(this).removeClass('pulse'); 6 $(this).removeClass('rubberBand'); 7 $(this).removeClass('shake'); 8 $(this).removeClass('swing'); 9 $(this).removeClass('tada'); 10 $(this).removeClass('wobble'); 11 $(this).removeClass('bounceIn'); 12 $(this).removeClass('bounceInDown'); 13 $(this).removeClass('bounceInLeft'); 14 $(this).removeClass('bounceInRight'); 15 $(this).removeClass('bounceInUp'); 16 $(this).removeClass('bounceOut'); 17 $(this).removeClass('bounceOutDown'); 18 $(this).removeClass('bounceOutLeft'); 19 $(this).removeClass('bounceOutRight'); 20 $(this).removeClass('bounceOutUp'); 21 $(this).removeClass('fadeIn'); 22 $(this).removeClass('fadeInDown'); 23 $(this).removeClass('fadeInDownBig'); 24 $(this).removeClass('fadeInLeft'); 25 $(this).removeClass('fadeInLeftBig'); 26 $(this).removeClass('fadeInRight'); 27 $(this).removeClass('fadeInRightBig'); 28 $(this).removeClass('fadeInUp'); 29 $(this).removeClass('fadeInUpBig'); 30 $(this).removeClass('fadeOut'); 31 $(this).removeClass('fadeOutDown'); 32 $(this).removeClass('fadeOutDownBig'); 33 $(this).removeClass('fadeOutLeft'); 34 $(this).removeClass('fadeOutLeftBig'); 35 $(this).removeClass('fadeOutRight'); 36 $(this).removeClass('fadeOutRightBig'); 37 $(this).removeClass('fadeOutUp'); 38 $(this).removeClass('fadeOutUpBig'); 39 $(this).removeClass('flip'); 40 $(this).removeClass('flipInX'); 41 $(this).removeClass('flipInY'); 42 $(this).removeClass('flipOutX'); 43 $(this).removeClass('flipOutY'); 44 $(this).removeClass('lightSpeedIn'); 45 $(this).removeClass('lightSpeedOut'); 46 $(this).removeClass('rotateIn'); 47 $(this).removeClass('rotateInDownLeft'); 48 $(this).removeClass('rotateInDownRight'); 49 $(this).removeClass('rotateInUpLeft'); 50 $(this).removeClass('rotateInUpRight'); 51 $(this).removeClass('rotateOut'); 52 $(this).removeClass('rotateOutDownLeft'); 53 $(this).removeClass('rotateOutDownRight'); 54 $(this).removeClass('rotateOutUpLeft'); 55 $(this).removeClass('rotateOutUpRight'); 56 $(this).removeClass('slideInDown'); 57 $(this).removeClass('slideInLeft'); 58 $(this).removeClass('slideInRight'); 59 $(this).removeClass('slideOutLeft'); 60 $(this).removeClass('slideOutRight'); 61 $(this).removeClass('slideOutUp'); 62 $(this).removeClass('hinge'); 63 $(this).removeClass('rollIn'); 64 $(this).removeClass('rollOut'); 65 $(this).removeAttr('style'); // 解決wow.js與animated.css的沖突。因為wow.js會在該元素上產生style設置。導致animated.css無效 66 });