例項詳解css3動畫庫animate.css的各種動畫效果
阿新 • • 發佈：2019-01-24
animate.css 是一個來自國外的 CSS3 動畫庫，它預設了抖動（shake）、閃爍（flash）、彈跳（bounce）、翻轉（flip）、旋轉（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多達 60 多種動畫效果，幾乎包含了所有常見的動畫效果。它的老搭檔wow.js，這倆好哥們，經常一起使用。
animate.css包括shake、flash、swing、bounce、tada、wobble、pulse
flip、flipInX、flipOutX、flipInY、flipOutY
fadeIn、fadeInUp、fadeInDown、fadeInLeft、fadeInRight、fadeInUpBig、fadeInDownBig、fadeInLeftBig、fadeInRightBig
fadeOut、fadeOutUp、fadeOutDown、fadeOutLeft、fadeOutRight、fadeOutUpBig、fadeOutDownBig、fadeOutLeftBig、fadeOutRightBig
slideInDown、slideInLeft、slideInRight、slideOutUp、slideOutLeft、slideOutRight
bounceIn、bounceInDown、bounceInUp、bounceInLeft、bounceInRight
bounceOut、bounceOutDown、bounceOutUp、bounceOutLeft、bounceOutRight
rotateIn、rotateInDownLeft、rotateInDownRight、rotateInUpLeft、rotateInUpRight
rotateOut、rotateOutDownLeft、rotateOutDownRight、rotateOutUpLeft、rotateOutUpRight
lightSpeedIn、lightSpeedOut、hinge、rollIn、rollOut等60幾種動畫，我們下面直接上程式碼，一一解釋它的含義。
下面的所有效果，滑鼠移到對應的效果名，就可以看到動畫哦……
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>css3動畫庫animate.css的各種效果案例詳解</title> <link href="http://cdn.bootcss.com/animate.css/3.5.1/animate.min.css" rel="stylesheet"> <style> div,.animated{ font-size: 30px; } p,div,span,h1,.animated{ text-align: center; } span{ cursor: pointer; color: #f377a0; font-size: 20px; font-family: Consolas,arial,"宋體"; margin: 5px; } span:hover{ color: #fff; background-color: #f35626; padding: 5px; border-radius: 5px; } </style> </head> <body> <h1 class="animated" id="do"><strong>animate.css的各種效果</strong></h1> <div>----------------------------------------------關注者(Attention Seekers)----------------------------------------------</div> <p> <span data-remark="左右輕微搖晃效果" >shake</span> <span data-remark="一閃一閃效果">flash</span> <span data-remark="單擺效果">swing</span> <span data-remark="上下反彈效果">bounce</span> <span data-remark="時間-波幅範圍分析效果">tada</span> <span data-remark="左右大幅度抖動效果">wobble</span> <span data-remark="脈衝效果">pulse</span> <span data-remark="快速翻轉效果">flip</span> </p> <div>----------------------------------------------彈進來(Bouncing Entrances)----------------------------------------------</div> <p> <span data-remark="直接彈進來效果">bounceIn</span> <span data-remark="從上面彈進來效果">bounceInDown</span> <span data-remark="從左邊彈進來效果">bounceInLeft</span> <span data-remark="從右邊彈進來效果">bounceInRight</span> <span data-remark="從下面彈進來效果">bounceInUp</span> </p> <div>----------------------------------------------彈出去(Bouncing Exits)----------------------------------------------</div> <p> <span data-remark="直接彈出去效果">bounceOut</span> <span data-remark="從下面彈出去效果">bounceOutDown</span> <span data-remark="從左邊彈出去效果">bounceOutLeft</span> <span data-remark="從右邊彈出去效果">bounceOutRight</span> <span data-remark="從上面彈出去效果">bounceOutUp</span> </p> <div>----------------------------------------------淡入(Fading Entrances)----------------------------------------------</div> <p> <span data-remark="直接淡入效果">fadeIn</span> <span data-remark="從上面慢慢淡入效果">fadeInDown</span> <span data-remark="從上面快速淡入效果">fadeInDownBig</span> <span data-remark="從左邊慢慢淡入效果">fadeInLeft</span> <span data-remark="從左邊快速淡入效果">fadeInLeftBig</span> <span data-remark="從右邊慢慢淡入效果">fadeInRight</span> <span data-remark="從右邊快速淡入效果">fadeInRightBig</span> <span data-remark="從下面慢慢淡入效果">fadeInUp</span> <span data-remark="從下面慢慢淡入效果">fadeInUpBig</span> </p> <div>----------------------------------------------淡出(Fading Exits)----------------------------------------------</div> <p> <span data-remark="直接淡出效果">fadeOut</span> <span data-remark="從下面慢慢淡出效果">fadeOutDown</span> <span data-remark="從下面快速淡出效果">fadeOutDownBig</span> <span data-remark="從左邊慢慢淡出效果">fadeOutLeft</span> <span data-remark="從左邊快速淡出效果">fadeOutLeftBig</span> <span data-remark="從右邊慢慢淡出效果">fadeOutRight</span> <span data-remark="從右邊快速淡出效果">fadeOutRightBig</span> <span data-remark="從上面慢慢淡出效果">fadeOutUp</span> <span data-remark="從上面慢慢淡出效果">fadeOutUpBig</span> </p> <div>----------------------------------------------鴨掌板(Flippers)----------------------------------------------</div> <p> <span data-remark="前後左右大翻轉效果">flip</span> <span data-remark="上下小旋轉效果">flipInX</span> <span data-remark="左右小旋轉效果">flipInY</span> <span data-remark="從下往上翻出效果">flipOutX</span> <span data-remark="從左往右翻出效果">flipOutY</span> </p> <div>----------------------------------------------光速(Lightspeed)----------------------------------------------</div> <p> <span data-remark="從右光速飛進效果">lightSpeedIn</span> <span data-remark="從右光速飛出效果">lightSpeedOut</span> </p> <div>----------------------------------------------旋轉進來(Rotating Entrances)----------------------------------------------</div> <p> <span data-remark="順時針旋轉進來效果">rotateIn</span> <span data-remark="從左上方旋轉下來效果">rotateInDownLeft</span> <span data-remark="從右上方旋轉下來效果">rotateInDownRight</span> <span data-remark="從左下方旋轉上來效果">rotateInUpLeft</span> <span data-remark="從右下方旋轉上來效果">rotateInUpRight</span> </p> <div>----------------------------------------------旋轉出去(Rotating Exits)----------------------------------------------</div> <p> <span data-remark="順時針旋轉出去效果">rotateOut</span> <span data-remark="從左下方旋轉下去效果">rotateOutDownLeft</span> <span data-remark="從右下方旋轉下去效果">rotateOutDownRight</span> <span data-remark="從左上方旋轉上去效果">rotateOutUpLeft</span> <span data-remark="從右上方旋轉上去效果">rotateOutUpRight</span> </p> <div>----------------------------------------------滑動條(Sliders)----------------------------------------------</div> <p> <span data-remark="從上滑進來效果">slideInDown</span> <span data-remark="從左滑進來效果">slideInLeft</span> <span data-remark="從右滑進來效果">slideInRight</span> <span data-remark="從左滑出去效果">slideOutLeft</span> <span data-remark="從右滑出去效果">slideOutRight</span> <span data-remark="從下滑出去效果">slideOutUp</span> </p> <div>----------------------------------------------特殊效果(Specials)----------------------------------------------</div> <p> <span data-remark="鉸鏈效果">hinge</span> <span data-remark="從左滾進來效果">rollIn</span> <span data-remark="從右滾出去效果">rollOut</span> </p> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> var animated_name,remark; $('span').hover(function() { animated_name = $(this).html(); remark = $(this).data('remark'); $('strong').html(remark).css('color','rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'); $('h1').addClass(animated_name); }, function() { animated_name = $(this).html(); $('h1').removeClass(animated_name); }); $('#xttblog').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ //動畫執行完成了 // alert('動畫結束後我才跳出來哦'); }); </script> </body> </html>
截圖如下：
