Animation.css动画效果属性
Animation.css动画效果属性
- 安装
- 使用
- 写法规则
- animation.css支持的动画种类
- 支持延时效果（delay效果延时执行）和加速（speed效果执行所花费的时间）
- 使用示例
- attention seekers
- bouncing entrances 登场
- bouncing exits 退场
- fading entrances 减弱进入
- fading exits 减弱退出
- flipper突然的效果
- light speed 非常快速的效果
- rotating entrances 旋转进入
- sliding entrances 滑动进入
- sliding exits 滑动退出
- zoom entrances z轴方向进入
- zoom exits z轴方向退出
- special 特别的
安装
npm install animate.css --save 或者 yarn add animate.css 或者直接下载
使用
"stylesheet" href="animate.min.css">
或者
"stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
写法规则
class样式里面animated是一定要有的，后面时animation.css提供的动画效果种类（例如infinite），同时也支持自定义的样式（例如yourElement）。
如：
<h1 class="animated infinite yourElement">Example</h1>
animation.css支持的动画种类
支持延时效果（delay效果延时执行）和加速（speed效果执行所花费的时间）
如果想要设置其他的延时和加速效果，请在自己的代码中进行设置。
使用示例
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>
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>