Animate.css的使用
很久之前學animate留的筆記..
2016年9月10號: E-cat
昨晚學了animate.css覺得很有意思，這樣可以通過簡單調用class類名就能實現豐富有趣的動態樣式。
今天接著學了swipe這個專為移動端設計的插件，為了鞏固知識點，做一下有關animate.css的筆記。
首先從下載和安裝開始說起：
①下載animate.css
下載地址：http://www.haorooms.com/uploads/example/Animatecss/
②安裝animate.css /*這裏註意，開發版大小一般為72kb，壓縮版為60kb*/
直接在頁面頂部
基本模板如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <link rel="stylesheet" href="css/animate.css" /> 7 </head> 8 <body> 9 <div id="test" class="animated bounce infinite">test</div> 10 <!-- 這邊註意div裏類名不分先後但是必須有animated 和 動作類名infinite即為無限循環，默認為播放一次 --> 11 </body> 12 </html>
下載、安裝結束，現在就可以開始享受learn more,write less的樂趣啦！！
接下來，就是對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 向右側旋轉消失
到此呢，整個animate.css裏的所有動作效果規整完畢。回上邊去填坑！！
算了，還是在這裏填吧，若想用到延時加載和控制運動過渡時間，就必須要用到jquery了，所以我們先去找個jq引入到頁面底部
Demo如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 7 <link rel="stylesheet" href="css/animate.css" /> 8 <style type="text/css"> 9 .test{ 10 position: absolute; 11 width: 100px; 12 font-size: 50px; 13 top: 50px; 14 left: 50%; 15 margin-left: -50px; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="animated rollIn test">test</div> 21 <script src="js/jquery-1.12.0.min.js" type="text/javascript" charset="utf-8"></script> 22 <script type="text/javascript"> 23 $(document).ready(function(){ 24 $(‘.test‘).css({‘animation-duration‘:‘.3s‘,‘animation-delay‘:‘3s‘}) 25 }) 26 </script> 27 </body> 28 </html>
沒錯，就是使用jq來重定義css樣式，這種方法其實違背了animate簡化運動代碼的初衷！
Animate.css的使用