Animate.css 教程

最後更新：2016-07-12 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

animate.css 是一個有趣，酷炫的，跨瀏覽器的動畫庫，你可以將它用於你的項目中。不管是首頁，滑動切換，又或者是其它方面，你都可以通過它來製作出驚人的效果。

基本用法引入CSS檔案

這個對你來說應該再容易不過了，我相信你可能也已經對引入外部的CSS樣式檔案的代碼以及快速鍵也都背得滾瓜爛熟了。你只需要在HTML檔案的head標籤中引入CSS樣式檔案，如下：

<head><link rel="stylesheet" href="animate.min.css"></head>

輔助類

給你想添加動畫效果的元素添加一個 animated 類（必需）。如果需要動畫迴圈運動，你還需要給這個元素追加 infinite 類，又或者自己另外定義一個類似於 infinite 的類。

效果添加

接下來就是最後一步了，最激動人心，也是最重要的一步，為元素添加你想要的效果所對應的類名就大功告成了。下面我就列出來，你大可隨便挑，隨便選。

bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

樣本

<h1 class="animated infinite bounce">Example</h1>

你可以通過這裡來體驗 Animate.css 的強大效果：https://daneden.github.io/animate.css/

進階用法

正如上面所說的，把 animate.css 用到你的網站項目中，你只需要簡單地把下面的這一行代碼扔到你頁面的head 標籤裡就可以了，接著就是給目標元素添加一個 animated 類。就這樣！你就可以得到一個酷炫的動畫效果了。

<head><link rel="stylesheet" href="animate.min.css"></head>

jQuery 基本用法

你還可以通過 jQuery 或者自己定義的 CSS 規則來給目標元素一次性添加對應效果的 class 類。

$(‘#yourElement‘).addClass(‘animated bounceOutLeft‘);

你還可以監聽動畫事件是否已經執行完畢，並執行回呼函數。

$(‘#yourElement‘).one(‘webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend‘, doSomething);

擴充 jQuery

你還可以通過擴充 jQuery 來實現自己想要效果。

$.fn.extend({animateCss: function (animationName) {var animationEnd = ‘webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend‘;$(this).addClass(‘animated ‘ + animationName).one(animationEnd, function() {$(this).removeClass(‘animated ‘ + animationName);});}});

可以像下面這樣使用

$(‘#yourElement‘).animateCss(‘bounce‘);

動畫延時

你還可以改變動畫運動時間，添加動畫延遲，或者直接修改預設配置的數字。

#yourElement {-vendor-animation-duration: 3s;-vendor-animation-delay: 2s;-vendor-animation-iteration-count: infinite;}

使用的時候記得把CSS樣式中的“vendor”用相應的首碼替換掉（webkit, moz, etc）。

定製構建gulp.js 管理

Animate.css是通過 gulp.js 管理，你可以很輕易地建立自訂構建，首先你需要的就是一個Gulp

$ cd path/to/animate.css/$ sudo npm install

gulp.js 用法

接下來就是執行 gulp 來完成你的自訂構建。例如，如果你只想使用裡面的一些效果，你就可以簡單的編輯 animate-config.json 來選擇你想要的效果代碼就好了。

"attention_seekers": {"bounce": true,"flash": false,"pulse": false,"shake": true,"headShake": true,"swing": true,"tada": true,"wobble": true,"jello":true}

Animate.css 教程

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Animate.css 教程

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support