純CSS，不需JavaScript，支援多瀏覽器的動畫特效；隨插即用，舞動你的網頁人生

GitHub Star: 47,800
Javascripting Overall: 94%
瀏覽器: Chrome、Firefox和IE10+
RWD: 不支援(可運作)
License: MIT

《安裝》

• CDN

    <!-- Animate.css v3.5.2 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"  />
  

• npm

    $ npm install animate.css --save
  

• Bower

    $ bower install animate.css --save
  

《範例》

• 無限次彈跳效果

    <!-- 
    	類別設定[註1]
    	animated: 啟用動畫
    	infinite: 無限循環
  
    	效果類別(列表[註2])
    	bounce: 彈跳
    -->
    <div class="animated bounce infinite">example</div> 
  

• 當動畫結束時後執行特定事件

  

    <!-- 
    	類別設定[註1]
    	animated: 啟用動畫
  
    	效果類別(列表[註2])
    	bounce: 彈跳
    -->
    <div class="animated bounce" id="example">Hello World</div> 
    <!-- jQuery v1.9.1 -->
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <!-- jQuery animateCss Extend -->
    <script>
    	$.fn.extend({
    		animateCss: function ( animationName, callback )
    		{
    			var animationEnd = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
    			this.addClass( "animated " + animationName ).one( animationEnd, function() {
    				$(this).removeClass( "animated " + animationName );
    				if (callback) callback();
    			});
    			return this;
    		}
    	});
    </script>
    <!-- #example動畫結束後執行此事件 -->
    <script>
    	$( "#example" ).animateCss( "bounce", function () {
    		$(  "#example" ).css( "color", "red" );
    	});
  

  [註1]

  類別	描述

  animated|啟用動畫
  infinite|無限循環

  [註2]

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • 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
  • ackInTheBox
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

《延伸》

1. Animate.css
2. daneden/animate.css: ? A cross-browser library of CSS animations. As easy to use as an easy thing.