Animation.css學習筆記

靜水流深醬發表於2018-12-08
CSS筆記

animation.css是一款非常炫酷、有趣、跨瀏覽器的預設css3動畫庫，便於你在專案中引用。

  • 安裝

    npm install animate.css --save 或者 yarn add animate.css 或者直接下載

  • 使用

    在專案中引用

    <head>
  <link rel="stylesheet" href="animate.min.css">
</head>
或者
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>複製程式碼

  • 使用規則

    class樣式裡面animated是一定要有的，後面時animation.css提供的動畫效果種類（例如infinite），同時也支援自定義的樣式（例如yourElement）。

    <h1 class="animated infinite yourElement">Example</h1>複製程式碼

    animation.css支援的動畫種類：

Class Name
bounceflashpulserubberBand
shakeheadShakeswingtada
wobblejellobounceInbounceInDown
bounceInLeftbounceInRightbounceInUpbounceOut
bounceOutDownbounceOutLeftbounceOutRightbounceOutUp
fadeInfadeInDownfadeInDownBigfadeInLeft
fadeInLeftBigfadeInRightfadeInRightBigfadeInUp
fadeInUpBigfadeOutfadeOutDownfadeOutDownBig
fadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBig
fadeOutUpfadeOutUpBigflipInXflipInY
flipOutXflipOutYlightSpeedInlightSpeedOut
rotateInrotateInDownLeftrotateInDownRightrotateInUpLeft
rotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRight
rotateOutUpLeftrotateOutUpRighthingejackInTheBox
rollInrollOutzoomInzoomInDown
zoomInLeftzoomInRightzoomInUpzoomOut
zoomOutDownzoomOutLeftzoomOutRightzoomOutUp
slideInDownslideInLeftslideInRightslideInUp
slideOutDownslideOutLeftslideOutRightslideOutUp
heartBeat

  • 支援延時效果（delay效果延時執行）和加速（speed效果執行所花費的時間）

    Class NameDelay Time
    delay-2s2s
    delay-3s3s
    delay-4s4s
    delay-5s5s
    Class NameSpeed Time
    slow2s
    slower3s
    fast800ms
    faster500ms

如果想要設定其他的延時和加速效果，請在自己的程式碼中進行設定。

使用示例：

  • attention seekers

    1. bounce 彈跳：

      <h1 class="animated bounce delay-2s"> test animation css</h1>複製程式碼

    2. flash閃爍：

      <h1 class="animated flash delay-2s"> test animation css</h1>複製程式碼

    3. pulse脈搏跳動：

      <h1 class="animated pulse delay-2s"> test animation css</h1>複製程式碼

    4. rubberBand橡皮筋:

      <h1 class="animated rubberBand delay-2s"> test animation css</h1>複製程式碼

    5. shake搖動：

      <h1 class="animated shake delay-2s"> test animation css</h1>複製程式碼

    6. swing搖擺：

      <h1 class="animated swing delay-2s"> test animation css</h1>複製程式碼

    7. tada：

      <h1 class="animated tada delay-2s"> test animation css</h1>複製程式碼

    8. wobble晃動：

      <h1 class="animated wobble delay-2s"> test animation css</h1>複製程式碼

    9. jello果凍：

      <h1 class="animated jello delay-2s"> test animation css</h1>複製程式碼

  • bouncing entrances 登場

    1. bounceIn 彈跳進入(從左)：

      <h1 class="animated bounceIn delay-2s"> test animation css</h1>複製程式碼

    2. bounceInDown彈跳從上進入：

      <h1 class="animated bounceInDown delay-2s"> test animation css</h1>複製程式碼

    3. bounceInLeft彈跳從左進入：

      <h1 class="animated bounceInLeft delay-2s"> test animation css</h1>複製程式碼

    4. bounceInRight彈跳從右進入：

      <h1 class="animated bounceInRight delay-2s"> test animation css</h1>複製程式碼

    5. bounceInUp彈跳從下進入：

      <h1 class="animated bounceInUp delay-2s"> test animation css</h1>複製程式碼

  • bouncing exits 退場

    1. bounceOut 彈跳退出：

      <h1 class="animated bounceOut delay-2s"> test animation css</h1>複製程式碼

    2. bounceOutDown彈跳從下退出：

      <h1 class="animated bounceOutDown delay-2s"> test animation css</h1>複製程式碼

    3. bounceOutLeft彈跳從左退出：

      <h1 class="animated bounceInLeft delay-2s"> test animation css</h1>複製程式碼

    4. bounceOutRight彈跳從右退出：

      <h1 class="animated bounceOutRight delay-2s"> test animation css</h1>複製程式碼

    5. bounceOutUp彈跳從上退出：

      <h1 class="animated bounceOutUp delay-2s"> test animation css</h1>複製程式碼

  • fading entrances 減弱進入

    1. fadeIn淡入：

      <h1 class="animated fadeIn delay-2s"> test animation css</h1>複製程式碼

    2. fadeInDown 從上往下淡入：

      <h1 class="animated fadeInDown delay-2s"> test animation css</h1>複製程式碼

    3. fadeInDownBig 從上往下變大淡入：

      <h1 class="animated fadeInDownBig delay-2s"> test animation css</h1>複製程式碼

    4. fadeInLegt從左往右淡入：

      <h1 class="animated fadeInLegt delay-2s"> test animation css</h1>複製程式碼

    5. fadeInLegtBig從左往右變大淡入：

      <h1 class="animated fadeInLegtBig delay-2s"> test animation css</h1>複製程式碼

    6. fadeInRight從右往左淡入：

      <h1 class="animated fadeInRight delay-2s"> test animation css</h1>複製程式碼

    7. fadeInRightBig從右往左變大淡入：

      <h1 class="animated fadeInRightBig delay-2s"> test animation css</h1>複製程式碼

    8. fadeInUp從下往上淡入：

      <h1 class="animated fadeInUp delay-2s"> test animation css</h1>複製程式碼

    9. fadeInUpBig從下往上變大淡入：

      <h1 class="animated fadeInUpBig delay-2s"> test animation css</h1>複製程式碼

  • fading exits 減弱退出

    1. fadeOut淡出：

      <h1 class="animated fadeOut delay-2s"> test animation css</h1>複製程式碼

    2. fadeOutDown 從上往下淡出：

      <h1 class="animated fadeOutDown delay-2s"> test animation css</h1>複製程式碼

    3. fadeOutDownBig 從上往下變大淡出：

      <h1 class="animated fadeOutDownBig delay-2s"> test animation css</h1>複製程式碼

    4. fadeOutLegt從右往左淡出：

      <h1 class="animated fadeOutLegt delay-2s"> test animation css</h1>複製程式碼

    5. fadeOutLeftBig從右往左變大淡出：

      <h1 class="animated fadeOutLeftBig delay-2s"> test animation css</h1>複製程式碼

    6. fadeOutRight從左往右淡出：

      <h1 class="animated fadeOutRight delay-2s"> test animation css</h1>複製程式碼

    7. fadeOutRightBig從左往右變大淡出：

      <h1 class="animated fadeOutRightBig delay-2s"> test animation css</h1>複製程式碼

    8. fadeOutUp從下往上淡出：

      <h1 class="animated fadeOutUp delay-2s"> test animation css</h1>複製程式碼

    9. fadeOutUpBig從下往上變大淡出：

      <h1 class="animated fadeOutUpBig delay-2s"> test animation css</h1>複製程式碼

  • flipper突然的效果

    1. flip反轉輕彈

      <h1 class="animated flip delay-2s"> test animation css</h1>複製程式碼

    2. flipInX在x軸反轉進入

      <h1 class="animated flipInX delay-2s"> test animation css</h1>複製程式碼

    3. flipInY在y軸反轉進入

      <h1 class="animated flipInY delay-2s"> test animation css</h1>複製程式碼

    4. flipOutX在x軸反轉退出

      <h1 class="animated flipOutX delay-2s"> test animation css</h1>複製程式碼

    5. flipOutY在y軸反轉退出

      <h1 class="animated flipOutY delay-2s"> test animation css</h1>複製程式碼

  • light speed 非常快速的效果

    1. lightSpeedIn 非常快速的進入

      <h1 class="animated lightSpeedIn delay-2s"> test animation css</h1>複製程式碼

    2. lightSpeedOut 非常快速的進入

      <h1 class="animated lightSpeedOut delay-2s"> test animation css</h1>複製程式碼

  • rotating entrances 旋轉進入

    1. rotateIn旋轉進入

      <h1 class="animated rotateIn delay-2s"> test animation css</h1>複製程式碼

    2. rotateInDownLeft旋轉從左落下

      <h1 class="animated rotateInDownLeft delay-2s"> test animation css</h1>複製程式碼

    3. rotateInDownRight旋轉從右落下

      <h1 class="animated rotateInDownRight delay-2s"> test animation css</h1>複製程式碼

    4. rotateInUpLeft旋轉從左升起

      <h1 class="animated rotateInUpLeft delay-2s"> test animation css</h1>複製程式碼

    5. rotateInUpRight旋轉從右升起

      <h1 class="animated rotateInUpRight delay-2s"> test animation css</h1>複製程式碼

  • rotating exits 旋轉退出

    1. rotateOut旋轉退出

      <h1 class="animated rotateOut delay-2s"> test animation css</h1>複製程式碼

    2. rotateOutDownLeft旋轉從左落下退出

      <h1 class="animated rotateOutDownLeft delay-2s"> test animation css</h1>複製程式碼

    3. rotateOutDownRight旋轉從右落下退出

      <h1 class="animated rotateOutDownRight delay-2s"> test animation css</h1>複製程式碼

    4. rotateOutUpLeft旋轉從左升起退出

      <h1 class="animated rotateOutUpLeft delay-2s"> test animation css</h1>複製程式碼

    5. rotateOutUpRight旋轉從右升起退出

      <h1 class="animated rotateOutUpRight delay-2s"> test animation css</h1>複製程式碼

  • sliding entrances 滑動進入

    1. slideInUp上升滑動進入

      <h1 class="animated slideInUp delay-2s"> test animation css</h1>複製程式碼

    2. slideInDown下降滑動進入

      <h1 class="animated slideInDown delay-2s"> test animation css</h1>複製程式碼

    3. slideInRight從右滑入

      <h1 class="animated slideInRight delay-2s"> test animation css</h1>複製程式碼

    4. slideInLeft從左滑入

      <h1 class="animated slideInLeft delay-2s"> test animation css</h1>複製程式碼

  • sliding exits 滑動退出

    1. slideOutUp上升滑動退出

      <h1 class="animated slideOutUp delay-2s"> test animation css</h1>複製程式碼

    2. slideOutDown下降滑動退出

      <h1 class="animated slideOutDown delay-2s"> test animation css</h1>複製程式碼

    3. slideOutRight從右滑退出

      <h1 class="animated slideOutRight delay-2s"> test animation css</h1>複製程式碼

    4. slideOutLeft從左滑退出

      <h1 class="animated slideOutLeft delay-2s"> test animation css</h1>複製程式碼

  • zoom entrances z軸方向進入

    1. zoomIn z軸方向進入

      <h1 class="animated zoomIn delay-2s"> test animation css</h1>複製程式碼

    2. zoomInDown z軸方向下降進入

      <h1 class="animated zoomInDown delay-2s"> test animation css</h1>複製程式碼

    3. zoomInLeft z軸方向從左進入

      <h1 class="animated zoomInLeft delay-2s"> test animation css</h1>複製程式碼

    4. zoomInRight z軸方向從右進入

      <h1 class="animated zoomInRight delay-2s"> test animation css</h1>複製程式碼

  • zoom exits z軸方向退出

    1. zoomOut z軸方向退出

      <h1 class="animated zoomOut delay-2s"> test animation css</h1>複製程式碼

    2. zoomOutDown z軸方向下降退出

      <h1 class="animated zoomOutDown delay-2s"> test animation css</h1>複製程式碼

    3. zoomOutLeft z軸方向從左退出

      <h1 class="animated zoomOutLeft delay-2s"> test animation css</h1>複製程式碼

    4. zoomOutRight z軸方向從右退出

      <h1 class="animated zoomOutRight delay-2s"> test animation css</h1>複製程式碼

  • special 特別的

    1. hinge 鉸鏈效果

      <h1 class="animated hinge delay-2s"> test animation css</h1>複製程式碼

    2. jackInTheBox

      <h1 class="animated jackInTheBox delay-2s"> test animation css</h1>複製程式碼

    3. rollIn 翻滾進入

      <h1 class="animated rollIn delay-2s"> test animation css</h1>複製程式碼

    4. rollOut翻滾退出

      <h1 class="animated rollOut delay-2s"> test animation css</h1>複製程式碼



相關文章