本篇內容主要講解“如何使用Animate.css制作炫酷的CSS3動畫”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何使用Animate.css制作炫酷的CSS3動畫”吧!

網站建設哪家好，找成都創新互聯！專注于網頁設計、網站建設、微信開發、小程序定制開發、集團企業網站建設等服務項目。為回饋新老客戶創新互聯還提供了肇慶免費建站歡迎大家使用！

Animate.css是一個超強的CSS3動畫庫，它使用簡單，只需要將相關效果對應的class加入頁面元素中，就能實現翻轉、滑動、旋轉等等復雜超炫的跨瀏覽器的動畫效果，它讓開發這制作頁面動畫變得非常簡單。

如何使用

首先引入animate css文件。

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

然后給指定的元素加上指定的動畫class樣式名。

<p class="animated bounceOutLeft"></p>

這里包括兩個class名，第一個是基本的，也是必須添加的樣式名，任何想實現的元素都得添加這個樣式。第二個是指定的動畫樣式名，也就是想要什么動畫效果，指定對應的動畫樣式名稱就可以。如果想讓動畫循環則可以加入樣式：infinite 。

Animate.css提供了以下多種動畫效果可以直接作為class樣式添加使用，就像文章：jQuery Easing 動畫效果擴展提到的easing動畫一樣。

bounce ，flash ，pulse ，rubberBand ，shake ，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

如果說想給某個元素動態添加動畫樣式，可以結合jquery來實現：

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

當動畫效果執行完成后還可以通過以下代碼添加事件：

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

更多詳情請查看Animate.css項目官網地址：https://github.com/daneden/animate.css

到此，相信大家對“如何使用Animate.css制作炫酷的CSS3動畫”有了更深的了解，不妨來實際操作一番吧！這里是創新互聯建站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！

新聞標題：如何使用Animate.css制作炫酷的CSS3動畫-創新互聯
本文路徑：http://vcdvsql.cn/article30/diohpo.html

成都網站建設公司_創新互聯，為您提供小程序開發、微信公眾號、微信小程序、企業網站制作、外貿網站建設、App設計

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯