下載和安裝:
①下載animate.css
下載地址:https://www.haorooms.com/uploads/example/Animatecss/Animate/animate.css
②安裝animate.css /*開發版大小一般爲72kb,壓縮版爲60kb*/
直接在頁面頂部head標籤通過link引入<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
如下:
<link rel="stylesheet" href="css/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 向右側旋轉消失
若想用到延時加載和控制運動過渡時間,就必須要用jquery了