transition(轉換)
一個涉及到CSS屬性的基本的轉換就是定義和移動一個元素從它的靜止狀態(比如,深藍色背景)到它的hover或者激活狀態(比如,淺藍色背景)。
轉換可以和變形同時使用(以及引發諸如:hover 或:focus事件)以創建一些動畫。淡出背景色彩,滑動一個元素以及讓一個物件旋轉都可以透過CSS轉換實現。
以下為引用的內容: #nav a{ background-color:red; } |
轉換的一些參數
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。
影片網址: http://www.tudou.com/programs/view/YeTPctOy2mo
以下為引用的內容: #rotate { |
這個夢幻的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動畫。