animate.css动画样式详解

一、使用步骤

<!-- <link rel="stylesheet" href="https://www.jq22.com/jquery/animate-3.1.0.min.css"> -->
<link rel="stylesheet" href="animate.css">
<div class="animated bounceInLeft">从左边进入</div>

使用详细步骤：https://www.dowebok.com/98.html

二、属性

1、Attention Seekers
bounce：弹跳
flash：闪烁
pulse：脉冲（放大然后回到正常大小）
rubber：橡皮筋
Band
shake：摇（左右）
swing：摇摆（上下，以中心为原点）
tada：（缩小然后摇摆，幅度比较小）
wobble：摇晃（左右和上下都有，即沿着一个弧移动，比较快）

jello：果冻（像果冻一样抖动）
2、Bouncing Entrances(弹跳进入页面的动画)
bounceInLeft
bounceOutLeft
bounceInRight
bounceOutRight
bounceInDown
bounceOutDown
bounceInUp
bounceOutUp

3、Bouncing Exits(弹跳离开页面的动画)
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp

4、Fading Entrances(颜色逐渐加深进入页面的动画)
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig

5、Fading Exits(颜色逐渐变淡离开页面的动画)
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig

6、Flippers（翻动效果）
flip
flipInX
flipInY
flipOutX
flipOutY

7、Lightspeed(倾斜同时fade的进入进出效果)
lightSpeedIn
lightSpeedOut

8、Rotating Entrances(回转进入)
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight

9、Rotating Exits（回转出去）
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight

10、Sliders
slideInDown
slideInLeft
slideInRight
slideOutLeft
slideOutRight
slideOutUp

11、Specials特殊效果
hinge
rollIn
rollOut

演示：https://www.dowebok.com/demo/2014/98/