你需要知道的CSS3動畫技術 - 3


transition(轉換)



一個涉及到CSS屬性的基本的轉換就是定義和移動一個元素從它的靜止狀態(比如,深藍色背景)到它的hover或者激活狀態(比如,淺藍色背景)。

轉換可以和變形同時使用(以及引發諸如:hover 或:focus事件)以創建一些動畫。淡出背景色彩,滑動一個元素以及讓一個對象旋轉都可以通過CSS轉換實現。
 #nav a{ background-color:red; } 
 #nav a:hover, #nav a:focus{ 
  background-color:blue; 
  /* 告訴轉換去應用到background-color 屬性(看起來像一個CSS 參數,不是嗎? #foreshadowing)*/ 
  -webkit-transition-property:background-color; 
  /* 讓它持續兩秒鐘*/ 
  -webkit-transition-duration:2s; 
} 

轉換的一些參數


‧transition-property
 指定轉換的CSS屬性名稱,比如,上面的例子中,將轉換應用於background-color 屬性。
‧transition-duration
 定義轉換花費的時間(從舊屬性換到新屬性花費的時間)
‧transition-timing-function
 可以理解為過度效果。指定轉換過程中的中間值。可以用cubic- bezier指定。當然有幾個常用的內置值:ease | linear | ease-in | ease-out | ease-in-out
‧transition-delay
 這個比較容易理解,就是轉換延遲的時間。時間可以為正整數、負整數和零,非零的時候必須設置單位是s(秒)或者ms(毫秒),為負數的時候,轉換的動作會從該時間點開始顯示,之前的動作被截斷。

:參數部分為翻譯時添加,原文中沒有。

瀏覽器支持

像transform屬性一樣酷,但是目前只有WebKit瀏覽器支持。 -moz-transition已經在最近的nightly-build版本的Firefox 3.7中可用。你也可以添加-moz-transition到你的CSS中以實現將來的增強。甚至可以添加一個不用私有前綴的屬性,以防萬一。

Animation


動畫是CSS 3最有用的地方。你可以將我們在上面討論的所有的元素與動畫屬性比如animation-duration、animation-name 和animation-timing-function整合以創建像Flash動畫一樣的效果——純CSS。


#rotate {
 margin: 0 auto;
 width: 600px;
 height: 400px;
 /* 確保我們是在一個 3-D 空間 */
 -webkit-transform-style: preserve-3d;
 /*讓整個行使用x-軸旋轉、7秒中的動畫、無限次播放以及線性*/
 -webkit-animation-name: x-spin;
 -webkit-animation-duration: 7s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
}
 /* 定義要調用的動畫 */
@-webkit-keyframes x-spin {
 0% { -webkit-transform: rotateX(0deg); }
 50% { -webkit-transform: rotateX(180deg); }
 100% { -webkit-transform: rotateX(360deg); }
}

這個夢幻的CSS動畫代碼和在線演示可以在webkit 網站看到。該演示可以在任何網站看到,但是動畫效果卻只能在Mac os(雪豹)的WebKit的nightly build版本可見。它看起來就像上面的視頻中的一樣,如果你是在用mac os (雪豹版本),我認為安裝一個webkit以親眼看看這個效果是很值得的(它真的很酷)。 Windows系統用戶暫時無法欣賞這個效果。

animation的一些參數


‧animation的參數和translate有些像,所以如果你理解了translate的參數,這裡就不難理解了。
‧animation-name
 動畫的名稱。
‧animation-duration
 定義動畫播放一次需要的時間。默認為0;
‧animation-timing-function
 定義動畫播放的方式,參數設置類似transition- timing-function
‧animation-delay
 定義動畫開始的時間
‧animation-iteration-count
 定義循環的次數,infinite即為無限次。默認是1。
‧-webkit-animation-direction
 動畫播放的方向,兩個值,默認為normal,這個時候動畫的每次循環都向前播放。另一個值是alternate,則第偶數次向前播放,第奇數次向反方向播放。

瀏覽器支持

不幸的是,目前,只有少數瀏覽器支持CSS動畫。 2D CSS animations 可以在Safari 4 (Leopard)、Chrome 3、Safari Mobile、Shira 以及其它Webkit 瀏覽器中工作。 Safari 4 (Snow Leopard)支持3D動畫。

總結


現在,JavaScript可以在CSS 3完善之前彌補這個差距。遺憾的是,讓所有瀏覽器支持這些很棒的屬性可能需要一個很長的過程。不用等待那一天的到來,我們可以先使用一些嚴謹的漸進增強以及以來Javascript來增強我們的網站和應用。這不是件壞事,至少現在看起來是。

看了最近的IE9的公告,如果IE團隊添加這些屬性中的一些到這個新的版本的瀏覽器中我不會感到驚訝,他們已經開始考慮整合CSS3了(border-radius)。

web的前景是光明的,特別是因為這些類似動畫的高度實驗性的屬性。儘管很多屬性對客戶或高級產品工作還不可用,至少他們很有趣!我們都期待著有一天,我們可以支持所有平台,以建立一些真的很棒的輕量級應用。

參考與資源


A Crash Course in Advanced CSS3 Effects
 Net Tuts 發布的一個很酷的關於CSS3效果的視頻。
Webkit Announces Support for CSS 3D Transforms
 CSS3.info 製作的一個使用CSS3動畫的demo,目前只支持nightly build 版的WebKit.
Jonathan Snook on CSS Text Rotation
 Jonathan Snook 講述即將到來的CSS3 屬性.
DEV Camp CSS3 Tricks
 一份來自Dan Kurtz的幻燈演示
W3C Spec on 2-D Transformations
 關於2-D 變換的資源.
W3C Spec on 3-D Transformations
 一個關於3-D 變換的資源.
‧W3C Spec on CSS3 Animations
 CSS animations的W3C工作草案
Safari CSS參考
MDC:Using CSS transforms
MDC: -moz-transform

關於原作者


Tim Wright是一位網頁設計師/開發工程師和博主。他從2004年就成為一名web標準和易用性的倡導者。你可以在CSSKarma.com上找到他寫的更多文章,或者follow Tim on Twitter

相關

相關專題
CSS 3