animate.css 动画效果的使用

下载安装animate.css

使用BootCDN加速 https://www.bootcdn.cn/ ，下载min版本即可。

在线效果演示：https://daneden.github.io/animate.css/

重复执行

只需增加infinite即可

 <div class="article-box animated fadeIn infinite"></div>

这样这个div就回循环执行 fadeIn动画

API

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