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>
1
这样这个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 向右侧旋转消失
————————————————
版权声明：本文为CSDN博主「艾比利Kurtz」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_45794678/article/details/103561160