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做出的動畫流暢絢 ...
一周排行