iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 14
0
Modern Web

30天學習30套前端技術(2018年)系列 第 14

[十分鐘學習] Animate.css - 無料!純 ‧ CSS 動畫特效

example1

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

GitHub Star: 47,800
Javascripting Overall: 94%
瀏覽器: ChromeFirefoxIE10+
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> 
    
  • 當動畫結束時後執行特定事件

    example2

      <!-- 
      	類別設定[註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.

上一篇
[十分鐘學習] Moment.js - 時間停(ㄓㄨㄢˇ)止(ㄏㄨㄢˋ)器
下一篇
[十分鐘學習] Ace - 全球最大的程式語言編輯器上線了
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言