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 | |||
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
如果想要设置其他的延时和加速效果,请在自己的代码中进行设置。
使用示例:
-
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>
-