animate

下载和安装：

 

    ①下载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了