一、使用步驟

<!-- <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(回轉(zhuǎn)進入)
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight

9、Rotating Exits（回轉(zhuǎn)出去）
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/

總結(jié)

以上是生活随笔為你收集整理的animate.css动画样式详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。