animate.css是一個純CSS的動畫庫，目前有近百種的動畫樣式，使用了animate.css之後，你只需指定想要的動畫效果animate.css就會幫你完成，但是animate.css是在頁面載入時就執行，訪客還沒看到動畫就已經執行完畢，所以要搭配wow.js，便可等到頁面捲動到元素出現在可視區域時才執行動畫，就像本站的首頁一樣...

以下是animate.css的動畫效果清單，animate官網也提供了所有可用的動畫演示

點擊圖片可以放大檢視

bounce、flash、pulse、rubberBand、shakeX、shakeY、headShake、swing、tada、wobble、jello、heartBeat、backInDown、backInLeft、backInRight、backInUp、backOutDown、backOutLeft、backOutRight、backOutUp、bounceIn、bounceInDown、bounceInLeft、bounceInRight、bounceInUp、bounceOut、bounceOutDown、bounceOutLeft、bounceOutRight、bounceOutUp、fadeIn、fadeInDown、fadeInDownBig、fadeInLeft、fadeInLeftBig、fadeInRight、fadeInRightBig、fadeInUp、fadeInUpBig、fadeInTopLeft、fadeInTopRight、fadeInBottomLeft、fadeInBottomRight、fadeOut、fadeOutDown、fadeOutDownBig、fadeOutLeft、fadeOutLeftBig、fadeOutRight、fadeOutRightBig、fadeOutUp、fadeOutUpBig、fadeOutTopLeft、fadeOutTopRight、fadeOutBottomRight、fadeOutBottomLeft、flip、flipInX、flipInY、flipOutX、flipOutY、lightSpeedInRight、lightSpeedInLeft、lightSpeedOutRight、lightSpeedOutLeft、rotateIn、rotateInDownLeft、rotateInDownRight、rotateInUpLeft、rotateInUpRight、rotateOut、rotateOutDownLeft、rotateOutDownRight、rotateOutUpLeft、rotateOutUpRight、hinge、jackInTheBox、rollIn、rollOut、zoomIn、zoomInDown、zoomInLeft、zoomInRight、zoomInUp、zoomOut、zoomOutDown、zoomOutLeft、zoomOutRight、zoomOutUp、slideInDown、slideInLeft、slideInRight、slideInUp、slideOutDown、slideOutLeft、slideOutRight、slideOutUp

<!-- 首先載入必要檔案、並初始化 -->
<link href="css/animate.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript">
	new WOW().init();
</script>
<!-- 在要執行動畫的元素上指定動畫方式，如果要HTML元素出現可是範圍才執行動畫，請務必加上wow類 -->
<div class="col-md-6 wow fadeInRight">
	<!-- 動畫內容（文字或圖片、影音）-->
</div>