Animation.css學習筆記
阿新 • • 發佈：2018-12-10
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> 或者 import 'aniamtion.css'; -
使用規則
class樣式裡面animated是一定要有的，後面時animation.css提供的動畫效果種類（例如infinite），同時也支援自定義的樣式（例如yourElement）。
<h1 class="animated infinite yourElement">Example</h1>animation.css支援的動畫種類：
| Class Name | |||
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 |
jackInTheBox |
rollIn |
rollOut |
zoomIn |
zoomInDown |
zoomInLeft |
zoomInRight |
zoomInUp |
zoomOut |
zoomOutDown |
zoomOutLeft |
zoomOutRight |
zoomOutUp |
slideInDown |
slideInLeft |
slideInRight |
slideInUp |
slideOutDown |
slideOutLeft |
slideOutRight |
slideOutUp |
heartBeat |
-
支援延時效果（delay）和加速（speed）
Class Name Delay Time delay-2s2sdelay-3s3sdelay-4s4sdelay-5s5sClass Name Speed Time slow2sslower3sfast800msfaster500ms
如果想要設定其他的延時和加速效果，請在自己的程式碼中進行設定。
使用示例：
-
attention seekers
-
bounce 彈跳：
<h1 class="animated bounce delay-2s"> test animation css</h1> -
flash閃爍：
<h1 class="animated flash delay-2s"> test animation css</h1> -
pulse脈搏跳動：
<h1 class="animated pulse delay-2s"> test animation css</h1> -
rubberBand橡皮筋:
<h1 class="animated rubberBand delay-2s"> test animation css</h1> -
shake搖動：
<h1 class="animated shake delay-2s"> test animation css</h1> -
swing搖擺：
<h1 class="animated swing delay-2s"> test animation css</h1> -
tada：
<h1 class="animated tada delay-2s"> test animation css</h1> -
wobble晃動：
<h1 class="animated wobble delay-2s"> test animation css</h1> -
jello果凍：
<h1 class="animated jello delay-2s"> test animation css</h1>
-
-
bouncing entrances 登場
-
bounceIn 彈跳進入(從左)：
<h1 class="animated bounceIn delay-2s"> test animation css</h1> -
bounceInDown彈跳從上進入：
<h1 class="animated bounceInDown delay-2s"> test animation css</h1> -
bounceInLeft彈跳從左進入：
<h1 class="animated bounceInLeft delay-2s"> test animation css</h1> -
bounceInRight彈跳從右進入：
<h1 class="animated bounceInRight delay-2s"> test animation css</h1> -
bounceInUp彈跳從下進入：
<h1 class="animated bounceInUp delay-2s"> test animation css</h1>
-
-
bouncing exits 退場
-
bounceOut 彈跳退出：
<h1 class="animated bounceOut delay-2s"> test animation css</h1> -
bounceOutDown彈跳從下退出：
<h1 class="animated bounceOutDown delay-2s"> test animation css</h1> -
bounceOutLeft彈跳從左退出：
<h1 class="animated bounceInLeft delay-2s"> test animation css</h1> -
bounceOutRight彈跳從右退出：
<h1 class="animated bounceOutRight delay-2s"> test animation css</h1> -
bounceOutUp彈跳從上退出：
<h1 class="animated bounceOutUp delay-2s"> test animation css</h1>
-
-
fading entrances 減弱進入
-
fadeIn淡入：
<h1 class="animated fadeIn delay-2s"> test animation css</h1> -
fadeInDown 從上往下淡入：
<h1 class="animated fadeInDown delay-2s"> test animation css</h1> -
fadeInDownBig 從上往下變大淡入：
<h1 class="animated fadeInDownBig delay-2s"> test animation css</h1> -
fadeInLegt從左往右淡入：
<h1 class="animated fadeInLegt delay-2s"> test animation css</h1> -
fadeInLegtBig從左往右變大淡入：
<h1 class="animated fadeInLegtBig delay-2s"> test animation css</h1> -
fadeInRight從右往左淡入：
<h1 class="animated fadeInRight delay-2s"> test animation css</h1> -
fadeInRightBig從右往左變大淡入：
<h1 class="animated fadeInRightBig delay-2s"> test animation css</h1> -
fadeInUp從下往上淡入：
<h1 class="animated fadeInUp delay-2s"> test animation css</h1> -
fadeInUpBig從下往上變大淡入：
<h1 class="animated fadeInUpBig delay-2s"> test animation css</h1>
-
未完待續…