下载和安装:
①下载animate.css
下载地址:https://www.haorooms.com/uploads/example/Animatecss/Animate/animate.css
②安装animate.css /*开发版大小一般为72kb,压缩版为60kb*/
直接在页面顶部head标签通过link引入<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
如下:
<link rel="stylesheet" href="css/animate.css" />
/*按官网顺序*/
①Attention seekers
- bounce 轻轻跳跃一下(弹跳;弹起,反跳;弹回)
- flash 闪烁两次(使闪光;反射)
- pulse 慢慢放大,然后回缩(跳动,脉跳)
- shake 左右轻晃几次
- swing 以中间顶部为中心小幅度晃动
- tada 很调皮的一个小晃动,ps:只能这么描述了
- wobble 大幅晃动,地动山摇
②Bouncing Entrances
- bounceIn 正中央,从无到有,轻轻抖动几次
- bounceInDown 从右侧进来,无到有,轻轻抖动几次
- bounceInLeft 雷同,但是一定要注意大小写“专业点叫驼峰式”
- bounceInRighr
- bounceInUp
- bouncing Exits
- bounceOut 正中央,从有到无,轻轻抖动几次消失
- bounceOutDown
- bounceOutLeft
- bounceOutRighr
- bounceOutUp
③Fading Entrances
- fadeIn 跟上面bounceIn还是有些区别的,毕竟不抖
- fadeInDown 逐渐从上面down下来
- fadeInDownBig逐渐从上面down下来,但是跟上面那位有稍微区别,加了big后起始位置是从设备外进来的
- fadeInLeft
- fadeInLeftBig
- fadeInRight
- fadeInRightNig
- fadeInUp
- fadeInUpBig 用up测试下big吧
- fading Exits
- fadeOut 恰与fadeIn相反
- fadeOutDown 逐渐从上面down下去消失,你确定不玩玩big了?
- fadeOutDownBig逐渐从上面down下去,但是跟上面那位有稍微区别,加了big后终点位置是从设备外
- fadeOutLeft
- fadeOutLeftBig
- fadeOutRight
- fadeOutRightNig
- fadeOutUp
- fadeOutUpBig
/*以下这些都是常用的哦!*/
④Flippers
- flip 一个夸张的放大饭庄缩小效果
- flipInX 沿中心水平轴小幅度反转出来
- FlipInY 沿中心竖直轴小幅度反转出来
- flipOutX 沿中心水平轴小幅度反转消失
- FlipOutY 沿中心竖直轴小幅度反转消失
⑤Lightspeed
- lightSpeedIn 字面意思就是光速出来喽,记得调快速度哦,什么,怎么调速我没说么?好吧,先留个坑,待会儿补。
- lightSpeedOut 光速消失
⑥Rotating Entrances
- rotateIn 准确说是以正中心点180度旋转渐显
- rotateInDownLeft 没错,就是以左上角为中心点转下来
- rotateInDownRight 就是以右上角为中心点转下来
- rotateInUpLeft 就是以左上角为中心点转上去
- rotateInUpRight 就是以右上角为中心点转上去
- rotating Exits
- rotateOut 准确说是以正中心点180度旋转渐隐
- rotateOut DownLeft
- rotateOut DownRight
- rotateOut UpLeft
- rotateOut UpRight
⑦Sliding Entrances
- slideInUp 这个slide感觉就有点鸡肋了,有了上边的Lightspeed、fadeIn,就会看出这个的弊端,动作幅度太小
- slideInDown
- slideInLeft
- slideInRight
- sliding Exits
- slideOutUp 表现依旧不好
- slideOutDown
- slideOutLeft
- slideOutRight
⑧Zoom Entrances
- zoomIn 牢记哦,正中央出来的,做效果是最棒了
- zoomInDown
- zoomInLeft
- zoomInRight
- zoomInUp
- zoom Exits
- zoomOut 牢记哦,正中央消失的,配合上面的zoomIn做效果是最棒了
- zoomOutDown
- zoomOutLeft
- zoomOutRight
- zoomOutUp
⑨Specials
- hinge 悬挂,颤抖,掉下去
- rollIn 从左侧旋转进入
- rollOut 向右侧旋转消失
若想用到延时加载和控制运动过渡时间,就必须要用jquery了