如何使用Animate.css制作炫酷的CSS3動(dòng)畫(huà)-創(chuàng)新互聯(lián)

本篇內(nèi)容主要講解“如何使用Animate.css制作炫酷的CSS3動(dòng)畫(huà)”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“如何使用Animate.css制作炫酷的CSS3動(dòng)畫(huà)”吧!

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、小程序定制開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了肇慶免費(fèi)建站歡迎大家使用！

Animate.css是一個(gè)超強(qiáng)的CSS3動(dòng)畫(huà)庫(kù)，它使用簡(jiǎn)單，只需要將相關(guān)效果對(duì)應(yīng)的class加入頁(yè)面元素中，就能實(shí)現(xiàn)翻轉(zhuǎn)、滑動(dòng)、旋轉(zhuǎn)等等復(fù)雜超炫的跨瀏覽器的動(dòng)畫(huà)效果，它讓開(kāi)發(fā)這制作頁(yè)面動(dòng)畫(huà)變得非常簡(jiǎn)單。

如何使用

首先引入animate css文件。

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

然后給指定的元素加上指定的動(dòng)畫(huà)class樣式名。

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

這里包括兩個(gè)class名，第一個(gè)是基本的，也是必須添加的樣式名，任何想實(shí)現(xiàn)的元素都得添加這個(gè)樣式。第二個(gè)是指定的動(dòng)畫(huà)樣式名，也就是想要什么動(dòng)畫(huà)效果，指定對(duì)應(yīng)的動(dòng)畫(huà)樣式名稱就可以。如果想讓動(dòng)畫(huà)循環(huán)則可以加入樣式：infinite 。

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

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

如果說(shuō)想給某個(gè)元素動(dòng)態(tài)添加動(dòng)畫(huà)樣式，可以結(jié)合jquery來(lái)實(shí)現(xiàn)：

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

當(dāng)動(dòng)畫(huà)效果執(zhí)行完成后還可以通過(guò)以下代碼添加事件：

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

更多詳情請(qǐng)查看Animate.css項(xiàng)目官網(wǎng)地址：https://github.com/daneden/animate.css

到此，相信大家對(duì)“如何使用Animate.css制作炫酷的CSS3動(dòng)畫(huà)”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)建站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

新聞標(biāo)題：如何使用Animate.css制作炫酷的CSS3動(dòng)畫(huà)-創(chuàng)新互聯(lián)
本文路徑：http://bm7419.com/article30/diohpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、微信公眾號(hào)、微信小程序、企業(yè)網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)