CSS3使用Animate.css制作超炫的動畫效果

CSS3要制作動畫是非常的簡單的事情了,我們只需要簡單的幾行代碼就可以實現動畫效果,下文來看一個CSS3使用Animate.css制作超炫的動畫效果.

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


首先引入animate css文件。

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

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


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


這裏包括兩個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);

更多相關文章
  • 利用css3制作loading效果是非常的簡單的一事情,感覺和html5有點像了,下文整理一篇CSS3制作loading載入動畫效果例子,有興趣的可進入參考.在我們這次的新設計教程中,我將向您展示如何創建純CSS3的
  • CSS3 Animations創建返回頂部的平滑動畫
    返回頂部在css3未出來前我們都是使用jquery或原生的js來實現返回頂部了,現在有了css3我們可以輕松的實現返回頂部了,具體給各位介紹一下.一般在一個長的網頁中,我們都會有一個按鈕,讓用戶能夠快速的定位到網頁的不同地方,一般都是一個返回頂部的按鈕,這個功能我們都是使用的jQuery來完成,但是 ...
  • CSS3實現的Logo動畫效果例子
    css3動畫處理是非常的的強大了,許多的一些動畫效果可以直接使用css3而不用js來實現了,下面一起來看一個簡單CSS3技巧實現的Logo動畫.下面是演示的案例代碼,<style>.imlogo{ display: block; width: 160px; height: 80px; b ...
  • ppt2010制作動畫效果ppt動畫飛入效果教程
    ppt制作中少不了動畫效果了,像我們點擊一張圖片就自動飛入一些文字或圖片效果,下面一聚教程
  • 在CSS 3引入Transition(過渡)這個概念之前,CSS是沒有時間軸的.也就是說,所有的狀態變化,都是即時完成.例如在以前當滑鼠放置于縮略圖之上,縮略圖會迅速變大.注意,縮略圖的變大是瞬間實現的.下面是代碼,相當簡單.具體例子 代碼如下 img{ height:15px; width:15p ...
  • animate() 方法執行 CSS 屬性集的自定義動畫.該方法通過CSS樣式將元素從一個狀態改變爲另一個狀態.CSS屬性值是逐漸改變的,這樣就可以創建動畫效果,下面我們一起來一個jquery animate step實現css3屬性動畫的例子.jquery animation的工作原理是通過將元素 ...
  • css3+html5 實現變形與動畫教程
    本文是我們詳細介紹一下 css3+html5實現動畫的原理及實例的圖解教程,css3制作動畫的幾個屬性:變形(transform),過渡(transition)和動畫(animation)等.transform變形.transform英文意思:改變,變形.css3中transform注意包括以下幾種 ...
  • 在css中動畫我們可以不用js可以直接使用animation來完成,今天小編來爲各位整理一些關于animation用法例子,希望例子能夠對各位有幫助.CSS3提供了一個令人心動的動畫屬性:animation,盡管利用animation做出來的動畫沒有flash或者javascript做出的動畫流暢絢 ...
一周排行
  • 在國內不管你是博客還是網站都可以找到一些盈利方式,本文章給各位同學介紹使用WordPress博客的朋友一些盈利方式總結Google Adsense&百度聯盟主要的盈利來源,其一便是廣告聯盟.Google Ad ...
  • kaptcha 是一個非常實用的驗證碼生成工具.有了它,你可以生成各種樣式的驗證碼,因爲它是可配置的.kaptcha工作的原理是調用 com.google.code.kaptcha.servlet.KaptchaSe
  • 本文章爲你提供一款精美的祝福你中秋節快樂flash動畫賀卡下載,如果你正在找中秋節賀卡就進來下載吧.嗨,嫦娥讓我給你捎個話:你昨晚如此含情脈脈地凝望她,讓她心跳加快,一夜未眠,拜托今天你不要再用目光騷擾她啦! 月亮代 ...
  • css3特效 box-shadow制作loading圖教程
    loading圖用戶體驗比較好,很多地方應用,以前我做loading圖是直接用gif動畫圖
  • Phalcon是一款php中國外非常的流程的框架了,但在國內Phalcon框架還不怎麽樣了,小編今天來爲各位介紹Phalcon框架安裝與使用教程,希望下文可以幫助到各位.linux伺服器安裝phalcon框架Phal
  • addslashes可會自動給單引號,雙引號增加\\\\\\這哦,這樣我們就可以安全的把數據存入數據庫中而不黑客利用.//參數'a..z'界定所有大小寫字母均被轉義echo addcslashes('foo[ ]', ...
  • Windows伺服器上安裝配置Webmail環境教程
    Webmail是一款網頁郵件伺服器了,這款伺服器操作非常的簡單我們只需要進行一些簡單的設置
  • F8000液晶電視連接USB設備時,支持哪些字幕格式
    字幕文件分爲外挂字幕和內嵌字幕,F8000系列液晶電視連接USB設備後,支持的字幕格式請查 ...
  • 榮耀暢玩4X隨機壁紙怎麽設置
    隨機壁紙以前在windows系統中出現了,現在手機同樣也可以設置隨機壁紙了,下文介紹榮耀暢 ...
  • 今天發現自己的apache啓動不了,查看日志提示是80商品己經被應用程序給占用了,下面我以查看80端口被占用的程序爲例,查看其它端口被程序占用了我們都可以使用些方法.開始–運行–cmd 進入命令提示符 輸入netst ...