如何充分利用CSS3動畫:教程,示例代碼和示例

文章撰寫者:
  • 網站設計
  • 更新:Aug 28,2013

當我們使用JS和jQuery時,我們可以完全控制動畫,我們可以創建一些很棒的效果,但價格非常高。 處理時間,跨瀏覽器兼容性(例如,移動設備在JS方面完全不同),代碼複雜性本身是我們在創建動畫界面時應該記住的要點。

所以,今天我們將看到如何通過使用CSS動畫和過渡來避免JS。 我們將從最基本的步驟討論一些令人敬畏的效果,如手風琴面板和動畫子菜單。

抓住一個座位,你記事本和一個真正的瀏覽器(除了IE之外),讓我們開始吧。

熱身

在使用CSS動畫時,我們有很多優點(以及我們生活中的一切)。 如果您需要將這些產品賣給您的老闆或客戶,您應該記住這一點:

  • 它們可能更快,因為它們可以利用硬件加速(如HTML5實現)
  • 它們在移動設備上的性能會更好,並且不需要特定的代碼來跟踪觸摸事件
  • JS需要由瀏覽器解釋,打破瀏覽器的可能性要大得多。 因此,當CSS失敗時,它會無聲地失敗,而JS可能會破壞整個頁面
  • 他們有很好的瀏覽器支持(這個網站將幫助您檢查具體的統計數據: http://caniuse.com/#search )

CSS3動畫的示例

在我們開始討論這篇文章之前,讓我們看一下純CSS製作的一些漂亮的動畫。

純CSS Twitter失敗鯨魚

動畫失敗的鯨魚

由史蒂文丹尼斯製作, 看到這個在行動。

純CSS滾動可樂可以
CSS 3動畫示例:滾動可樂罐頭

羅馬科爾特斯製造, 看到這個在行動。

純CSS走路的人

CSS 3動畫示例:行走的人

由Andrew Hoyer製作, 看到這個在行動。

弄髒你的手

我們來開始代碼。 我們將使用很多CSS偽類來觸發動畫。 說實話,許多開發人員建議你使用JS激活和取消激活動畫,但在這裡我們會看到更簡單的方法:

#test {background:red; } #test:hover {background:green; } #test:active {background:blue; } #test:target {background:black; }

我們還有一些其他偽類可供使用,但你已經有了這個想法! 所以如果你點擊#test元素會發生這種情況(假設它是一個鏈接):

  • 正常狀態:背景為紅色
  • 懸停:當鼠標進入元素區域時,它將具有綠色背景
  • 活動:當您單擊其上的光標並且仍然按下鼠標按鈕時,背景顏色將為藍色
  • 目標:當前頁面在URL中有#test時,此元素將為黑色

這些中的每一個都可用於CSS動畫,例如,您可以創建2鏈接以激活和停用使用此代碼的目標偽元素的CSS動畫:

<a href='#test'>激活</a> <a href='#'>停用</a>

CSS過渡

CSS過渡將從初始狀態順利變為最終狀態。 因此,您將在主選擇器中使用“transition”屬性定義時間和將受影響的每個屬性以及動畫應該如何。 我們來看一個例子:

.test {/ * transition-property duration timing-function,* / color:blue; 過渡:顏色2s,字體大小2s緩出; } .test:hover {color:red; } .test:active {font-size:200%; }

當你懸停.test元素時,它會逐漸將顏色從藍色變為紅色(這是一個很好的調色板,是吧?)。 單擊該元素時,字體大小將逐漸增加到默認字體大小的200%。

我們還有“過渡時間”屬性,設置為緩出,即動畫可用的“時間”將如何使用。 以下是可能的值:

  • 線性:從開始到結束的速度相同
  • 緩入:緩慢啟動
  • 緩解:緩慢結束
  • 輕鬆:慢啟動,快速中間,然後慢速結束
  • 緩入:緩慢啟動,緩慢結束
  • Cubic-bezier(a,b,c,d):自定義速度

立方貝塞爾函數將創建一個自定義動畫,其4數字從0到1不等,表示動畫速度X持續時間的數學曲線。

為了獲得更好的瀏覽器兼容性,您應該考慮使用opera,Firefox和webkit的供應商前綴,如下所示:

div {width:400px; -o-transition:寬度2s; -moz-transition:寬度2s; -webkit-transition:width 2s; 過渡:寬度2s; }

此外,您可以使用媒體查詢根據瀏覽器寬度(移動設備,平板電腦)定義不同的過渡。 這是一個簡單的例子:

body {font-size:1em; } @media screen and(max-width:800px){body {font-size:0.8em; @media screen和(max-width:400px){body {字體大小:0.7em; }}

增加瀏覽器寬度時,字體大小會突然改變。 此代碼將防止這種情況發生,從而實現更平滑的轉換:

body {-o-transition:font-size .5s linear; -moz-transition:font-size .5s linear; -webkit-transition:font-size .5s linear; 過渡:font-size .5s linear; }

如果您想要更改寬度,顏色,填充,菜單顯示,您可以使用此功能,如果您有不同的縱向/橫向顯示或尺寸。

CSS動畫 - 真正有趣的開始

動畫是在單個選擇器中定義的一系列過渡。 要定義CSS動畫,您需要遵循2步驟。

@keyframe規則用於定義一系列動畫步驟,它由唯一名稱和描述此動畫如何工作的樣式定義。 像往常一樣,我們需要一些供應商前綴,如下例所示:

/ *每個供應商的相同代碼* / @ -o-keyframe my-animation {... @ -moz-keyframe my-animation {... @ -webkit-keyframe my-animation {... / *動畫名稱* / @keyframe my-animation {/ * frame selector * / 0%{/ * frame style * / Left:0px; 上:0px; } 25%{左:200px; 上:0px; } 50%{左:200px; 上:200px; } 75%{左:0px; 上:200px; } 100%{左:0px; 上:0px; }}

因此,每個樣式都由幀/時間幀(如flash動畫中的那些幀)定義為百分比以及應該應用於那裡的樣式。 例如,這個關鍵幀表示元素將向左移動,然後向上移動,然後向右移動,然後向下移動。

在您執行步驟1並創建關鍵幀後,您可以將其實際應用於元素。 然後我們將使用與我們對CSS過渡完全相同的邏輯,區別在於現在我們的“過渡”是一個非常複雜的動畫。

要應用它,我們將使用animation屬性,它具有7子屬性:

  • 名稱:該唯一標識符
  • 持續時間:從0%到100%需要多長時間
  • 定時功能:與轉換定時功能幾乎相同
  • 延遲:啟動0%需要多長時間
  • 迭代計數:我們將有多少重複(無限循環的“無限”)
  • 方向:正常或交替(反向)
  • 播放狀態:如果動畫正在運行或暫停

當它是頁面的目標時,這將把我們的動畫應用到#test元素:

#test:target {/ * animation-name | 持續時間| 定時功能| 延遲|迭代次數| 方向| play-state * / animation:my-animation 10s linear 0s無限正常運行; }

考慮到這一點,我們可以創建一些很棒的例子。

CSS Only Accordion

我們將使用CSS動畫創建可折疊面板。 這是基本的HTML結構:

<div class =“accordion”> <a href="#tab1"> Tab 1 </a> <div id =“tab1”> <p> TEXT 1 </ p> </ div> <a href =“# tab2“>選項卡2 </a> <div id =”tab2“> <p> TEXT 2 </ p> </ div> <a href="#tab3">選項卡3 </a> <div id =” tab3“> <p> TEXT 3 </ p> </ div> </ div>

這將只創建面板和將觸發其中每個面板的鏈接。 這就是魔術發生的地方:

/ *在手風琴* * .accordion div {/ *內部的任何div默認隱藏* / height:0; 溢出:隱藏; / *黑魔法* /過渡:高度1s; } / *當提到的div是目標* / .accordion div:target {/ * height:auto不起作用,但這樣可以正常工作* / height:80px; }

很簡單,對吧? 你為此花了整整一生的時間使用JS嗎? :)

僅包含子菜單的CSS菜單

這是另一個相當簡單的應用程序。 你當然在你的網站上有一個導航菜單,我們經常需要在那裡使用一些子菜單。 顯示和隱藏項目的最佳方式是使用jQuery,對吧? 好吧,在測試此代碼後再想一想:

<nav> <ul> <li> <a href='#item1'> Item 1 </a> <div> <ul> <li> <a href='#item11'> Item 1.1 </a> </ li> <li> <a href='#item12'> Item 1.2 </a> </ li> </ ul> </ div> </ li> <li> <a href='#item2'> Item 2 </a> <div> <ul> <li> <a href='#item21'> Item 2.1 </a> </ li> <li> <a href='#item22'> Item 2.2 </a> </ li> </ ul> </ div> </ li> </ ul> </ nav>

巫術從這裡開始:

a {/ *只是讓鏈接更好* / display:block; 填充:4px; } nav {text-align:center; } / *任何菜單(包括主菜單)* / nav ul {display:inline-block; list-style:none; } nav> ul> li {/ *水平項目(垂直也可以正常工作)* / float:left; } nav li div {/ *折疊任何子菜單* / height:0; 溢出:隱藏; / * Houdini的感受* /過渡:身高1s; } nav li:hover> div {height:56px; }

加起來

這當然只是一個入門指南。 還有許多其他很酷的效果可以使用CSS動畫完成,還有很多事情要做。

那你以前用過嗎? 你能想到CSS動畫的另一個好的應用嗎? 使用評論分享您的想法!

關於羅切斯特奧利維拉

我是來自巴西Itajubá(MG)的網頁設計師和企業家。 我喜歡寫一些關於模糊主題和做一些很酷的東西。

連接: