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做出的動畫流暢絢 ...
一周排行
  • PHP中利用Xdebug進行遠程錯誤調試
    本人自己電腦也安裝了Xdebug我可以通過Xdebug來調試php頁面程序報錯具體行,下面 ...
  • nginx出現403 Forbidden錯誤是因不目錄或沒有索引頁面導致的我們只要設置一個index.htm即可解決這個問題了,下面一起來看看吧.nginx 的 403 Forbidden errors 表示你在請求 ...
  • 一款利用了JMail郵件發送組件或CDONTS電子郵件發送組件進行郵件發送,asp不具備這種功能必須利用第三方插件實例,我們寫了一個asp郵件發送類函數.'------------------------------
  • WinForm中DateTimePicker時間選擇與設置爲空值顯示
    本文章來給大家介紹WinForm中DateTimePicker時間選擇與設置爲空值顯示簡單
  • 最近開發了一個ios的app,在ios7.0+出現自定義導航欄左邊按鈕出現靠右的情況,後來自己解決了,解決辦法如下1.自定義按鈕 代碼如下 //左按鈕UIButton *leftBtn = [[UIButton al
  • iPhone4s升級iOS9會卡嗎?這個系統還沒出來但有一些朋友會發現ios9 快要上線了,但小編覺得蘋果4s肯定不能升級ios9了,我們可以換手機了.來自台灣地區供應鏈廠商的消息稱,蘋果要把iPhone6s和iPh ...
  • append(content):方法在被選元素的結尾(仍然在內部)插入指定內容,有很多朋友覺得append與html差不多,其它從英文意義上append是在原有基礎上增加,而html中是替換當前所有內容.定義和用法a ...
  • Validate是jquery中一個非常好用的表單驗證插件,它也是基于jquery來做的,最初接觸Validate插件時有點不明白,今天整理了一關于Validate插件的應用例子,有興趣的朋友可參考.常用驗證規則//
  • 講過利用jquery ajax與php實現圖片上傳,下面我介紹利用php ajax實現各種文件無刷新上傳,直接放實例希望給各位同學有幫助.可以批量進行添加上傳,簡單方便 代碼如下 <script type=&q ...
  • jQuery的 bind / unbind 方法應該說使用很簡單,而且大多數時候可能並不會用到,取而代之的是直接用 click / keydown 之類的事件名風格的方法來做事件綁定操作.但假設如下情況:需要在運行時 ...