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-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>
-
未完待续…