Animation.css學習筆記

時間 2019-11-29

標籤 animation.css animation css 學習筆記欄目 CSS 简体版

原文原文鏈接

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

安裝css3

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

使用npm

在項目中引用瀏覽器

<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>複製代碼

使用規則bash
class樣式裏面animated是必定要有的，後面時animation.css提供的動畫效果種類（例如infinite），同時也支持自定義的樣式（例如yourElement）。css3動畫
```
<h1 class="animated infinite yourElement">Example</h1>複製代碼
```
animation.css支持的動畫種類：ide


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-2s`	`2s`
`delay-3s`	`3s`
`delay-4s`	`4s`
`delay-5s`	`5s`

Class Name	Speed Time
`slow`	`2s`
`slower`	`3s`
`fast`	`800ms`
`faster`	`500ms`

若是想要設置其餘的延時和加速效果，請在本身的代碼中進行設置。ui

使用示例：

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>複製代碼

fading exits 減弱退出

fadeOut淡出：

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

fadeOutDown 從上往下淡出：

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

fadeOutDownBig 從上往下變大淡出：

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

fadeOutLegt從右往左淡出：

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

fadeOutLeftBig從右往左變大淡出：

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

fadeOutRight從左往右淡出：

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

fadeOutRightBig從左往右變大淡出：

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

fadeOutUp從下往上淡出：

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

fadeOutUpBig從下往上變大淡出：

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

flipper忽然的效果

flip反轉輕彈

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

flipInX在x軸反轉進入

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

flipInY在y軸反轉進入

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

flipOutX在x軸反轉退出

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

flipOutY在y軸反轉退出

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

light speed 很是快速的效果

lightSpeedIn 很是快速的進入

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

lightSpeedOut 很是快速的進入

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

rotating entrances 旋轉進入

rotateIn旋轉進入

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

rotateInDownLeft旋轉從左落下

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

rotateInDownRight旋轉從右落下

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

rotateInUpLeft旋轉從左升起

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

rotateInUpRight旋轉從右升起

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

rotating exits 旋轉退出

rotateOut旋轉退出

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

rotateOutDownLeft旋轉從左落下退出

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

rotateOutDownRight旋轉從右落下退出

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

rotateOutUpLeft旋轉從左升起退出

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

rotateOutUpRight旋轉從右升起退出

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

sliding entrances 滑動進入

slideInUp上升滑動進入

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

slideInDown降低滑動進入

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

slideInRight從右滑入

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

slideInLeft從左滑入

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

sliding exits 滑動退出

slideOutUp上升滑動退出

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

slideOutDown降低滑動退出

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

slideOutRight從右滑退出

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

slideOutLeft從左滑退出

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

zoom entrances z軸方向進入

zoomIn z軸方向進入

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

zoomInDown z軸方向降低進入

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

zoomInLeft z軸方向從左進入

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

zoomInRight z軸方向從右進入

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

zoom exits z軸方向退出

zoomOut z軸方向退出

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

zoomOutDown z軸方向降低退出

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

zoomOutLeft z軸方向從左退出

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

zoomOutRight z軸方向從右退出

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

special 特別的

hinge 鉸鏈效果

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

jackInTheBox

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

rollIn 翻滾進入

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

rollOut翻滾退出

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。