Animate.css 一款强大的预设css3动画库

首先从下载和安装开始说起：

①下载animate.css

    下载地址：https://www.haorooms.com/uploads/example/Animatecss/Animate/animate.css

②安装animate.css  /*这里注意，开发版大小一般为72kb，压缩版为60kb*/

直接在页面顶部head标签通过link引入

基本模板如下：

复制代码
1
2
3
4
5
6
7
8
9

test

10
11
12
复制代码

下载、安装结束，现在就可以开始享受learn more,write less的乐趣啦！！

接下来，就是对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 向右侧旋转消失
　　到此呢，整个animate.css里的所有动作效果规整完毕。回上边去填坑！！

算了，还是在这里填吧，若想用到延时加载和控制运动过渡时间，就必须要用到jquery了，所以我们先去找个jq引入到页面底部

Demo如下：

复制代码
1
2
3
4
5
6
7
8
18
19
20

test

21
27
28
复制代码
没错，就是使用jq来重定义css样式，这种方法其实违背了animate简化运动代码的初衷！