简单介绍animate.css
animate.css
是一个集合炫酷的,有趣的和跨浏览器的动画。
快速使用
- 引入
css
文件- 下载到本地加载
<link rel="stylesheet" href="animate.min.css">
- 使用CDN
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
- 下载到本地加载
- 给你想要添加动画效果的元素加上
animated
样式,如果想要动画循环执行的话,你需要加上infinite
样式。<h1 class="animated infinite bounce delay-2s">Example</h1>
vue中使用
安装,入口文件main.js中引入 ;
npm i animate.css -S
import animated from 'animate.css'
Vue.use(animated)
- 在模板中使用时,
<div class="animate__animated animate__rollIn helloWorld">
要加上前缀animate__
,否则可能没有动画效果
Attebtion Seekers: //晃动
bounce //上下轻微弹跳
flash //闪烁
pulse //轻微先变大后变小
rubberBand //橡皮筋拉伸缩回
shake //左右晃动
swing //秋千左右摇摆
tada //乒乓球弹跳
wobbble //左右大幅摇摆
Bouncing Entrances //晃动进入
bounceIn //弹跳进入
bounceInDown //自上弹入
bounceInLeft //自左弹入
bounceInRight //自右弹入
bounceInUp //自下弹入
Bouncing Exits //晃动离开
bounceOut //晃动从自身离开
bounceOutDown //晃动向下离开
bounceOutLeft //晃动向左离开
bounceOutRight //晃动向右离开
bounceOutUp //晃动向上离开
Fading Entrances //淡入方式
fadeIn //从自身轻微淡入
fadeInDown //从上轻微淡入
fadeInDownBig //从上大幅淡入
fadeInLeft //从左轻微淡入
fadeInLeftBig //从左大幅淡入
fadeInRight //从右轻微淡入
fadeInRightBig //从右大幅淡入
fadeInUp //从下轻微幅淡入
fadeInUpBig //从下大幅淡入
Fading Exits //淡出方式
fadeOut //淡出
fadeOutDown //向下轻微淡出
fadeOutDownBig //向下大幅淡出到底
fadeOutLeft //向左轻微淡出
fadeOutLeftBig //向左大幅淡出到底
fadeOutRight //向右轻微淡出
fadeOutRightBig //向右大幅淡出到底
fadeOutUp //向轻微淡出
fadeOutUpBig //向上大幅淡出到底
Flippers //翻滚
flip //元素中心为基点翻滚
flipInX //元素x轴为基点翻滚进入
flipInY //元素Y轴为基点翻滚出去
flipOutX //元素x轴为基点翻滚进入
flipOutY //元素Y轴为基点翻滚出入
lightSpeed //飘进飘出
lightSpeedIn //飘进
lightSpeedOut //飘出
Rotating Entrances //旋转进入方式
rotateIn /元素中心基点
rotateInDownLeft //上左旋转进入
rotateInDownRight //上右进入
rotateInUpLeft //下左进入
rotateInUpRight //下右进入
Rotating Exit //旋转出去方式
rotateOut //旋转出去
rotateOutDownLeft //向左下旋转出去
rotateOutDownRight //向右下旋转出去
rotateOutUpLeft //向左上旋转出去
rotateOutUpRight //向右上旋转出去
Sliders //滑动进出方式
slideInDown //自上而下
slideInLeft //自左进入
slideInRight //自右进入
slideOutLeft //自左出去
slideOutRight //自右出去
slideOutUp //自下出去
Zooms //scale由零变一,由一变零
zoomIn //scale由零变一
zoomInDown //从上方向
zoomInLeft //从左方向
zoomInRight //从右方向
zoomInUp //从上方向
zoomOut //scale由一变零
zoomOutDown //从上方向
zoomOutLeft //从左方向
zoomOutRight //从右方向
zoomOutUp //从下方向
Specials //特殊的
hinge //向下转轴
jackInTheBox //大小由零变一晃动淡入
rollIn //从左淡入旋转滑入
rollOut //从右淡入旋转滑出