好用好看的动画库

官网

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 向右侧旋转消失