CSS3 動畫基礎

標籤：

該文為譯文轉載，原文地址：http://tech.163.com/mobile/10/0106/09/5SB96QSM00112K88.html 譯文：你需要知道的CSS3 動畫技術原文：What You Need To Know About Behavioral CSS為網路而生CSS 3的屬性比如border-radius、box-shadow和 text-shadow 在webkit(Safari、Chrome等)和Gecko(Firefox)等先進的瀏覽器中的使用開始出現增長的勢頭。它們(這些CSS屬性)已經 為使用者建立更輕量的頁面和更豐富的體驗，而且它們可以優雅的降級。然而，這些只是CSS 3能為我們做的眾多事情中的一小部分。在本文中，我們將走的更遠，看一看變形(transformation)、轉換 (transition)和動畫(animation) 等更進階的CSS3技術。我們將涉及代碼本身、瀏覽器支援以及一些可以正確地展示這些新屬性是如何即提升你的設計又增強整體使用者體驗的例子。CSS 變形(Transformation)CSS transformation是W3C的一個草案。但當我第一次坐下來閱讀 它的 全部特性 以瞭解一些東西的時候，它並沒有讓我感到開竅。你可以想象的到，這個文檔是用技術術語的撰寫的，而且它更關注變形的圖形(比如繪圖)元素和矩陣。大一學習 微積分之後就沒有碰過矩陣了，我必須為本章節做很多好的舊瀏覽器測試以及猜測和檢驗。在看完我能找到的每一個教程和大量的瀏覽器測試之後，我總結出一些大家都能從中獲益的有用的關於CSS變形的資訊。transformtransform屬性實現了一些可用SVG實現的同樣的功能。它可用於內聯(inline)元素和塊級(block)元素。它允許我們旋轉、縮放和移動元素——只需要一行CSS代碼。一些前衛設計的最大詬病就是文字不可選(必須要使用切圖的方法實現)。當你熟練使用transform屬性來控制文字的時候，這就不再是問題了，因為這是個純CSS方法，所以元素內的文字會保持可選。這是CSS相對於使用圖片(或背景圖片)的一個巨大優勢。一些有趣而有用的變形功能：rotate　　　　Rotate(旋轉)允許你通過傳遞一個度數值來轉動一個對象。　　　　scale　　　　Scale是一個縮放功能，可以讓任一元素變的更大。它使用正數和負數以及小數作為參數。　　　　translate　　　　Translate就是基於X和Y 座標重新置放元素　　　　skew　　　　顧名思義，skew就是要將對象傾斜，參數是度數　　　　matrix　　　　transform支援矩陣變換，就是基於X和Y 座標重新置放元素下面讓我們更深入的瞭解每一個功能吧。請點擊“下一頁”，閱讀更多精彩內容。Rotatetransform屬性有很多用法，其中一個就是translate(旋轉)。translate就是基於角度轉動一個對象並可用於內嵌元素和區塊層級元素，它可以實現 很酷的效果 。#nav{-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}請注意在IE8中(非標準模式)它需要你寫成“-ms-filter”而不是“filter”。瀏覽器支援瀏覽器對translate的支援令人驚奇的廣泛。在上面的CSS片段中，我們直接加上-webkit-和-moz-首碼然後將#nav元素旋轉-90度。相當簡單吧？唯一的問題是對於一個相當重要的設計項目，如果IE不支援，很多設計師就會不情願使用它。幸運的是，IE有這方面的濾鏡:圖形旋轉濾鏡。它可以有4個旋轉值：0, 1, 2,和3。你將不會獲得和Webkit和Gecko一樣的精密控制，但是至少在一定程度上保持統一(甚至IE6)。雖然這個濾鏡只支援4個值，顯得有些雞肋，但是對於IE來說，聊勝於無吧。請點擊“下一頁”，閱讀更多精彩內容。scalescale並不像你想象的那樣工作：簡單的縮小和放大一個元素。縮放功能同時採用寬和高兩個值，這些值可以是正數、負數和小數。正數值放大一個元素，正如你期望的那樣，基於指定的寬度和高度。負數值並不會縮小元素，而是翻轉它(比如，文字被反轉)然後相應的縮放它。然而，你可以使用小於1的小數(例如.5)來收縮或者縮小一個元素。#nav { -webkit-transform: scale(2);-moz-transform: scale(2); }#nav { -webkit-transform: scale(2, 1);-moz-transform: scale(2, 1);}#nav { -webkit-transform: scale(-2, 1);-moz-transform: scale(-2, 1);}瀏覽器支援scale屬性目前只有Firefox, Safari 和Chrome支援，到目前為止沒有一個IE版本支援。縮放一個對象是相當有意義的設計選擇。它可以通過漸進增強來使用:hover，這可以在你的導航上添加一個小小的趣味。#nav li a:hover{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1);}請點擊“下一頁”，閱讀更多精彩內容。translate這個名稱“translate(轉化)”有點容易誤解。它事實上是一種使用X和Y座標值定位元素的方法。#nav{ -moz-transform: translate(10px, 20px);-webkit-transform: translate(10px, 20px);}瀏覽器支援translate屬性目前只被Firefox, Safari 和Chrome支援，而且還要使用瀏覽器的私人首碼-moz- 和-webkit-。請點擊“下一頁”，閱讀更多精彩內容。SkewSkew也是一個很有用的transform功能，它可以將一個對象圍繞著x和y軸按照一定的角度傾斜。這和rotate的旋轉不一樣，rotate只是旋轉，而不會讓元素的形狀改變。skew會讓一個元素的形狀改變。skew有兩個參數，分別代表x和y軸的傾斜度數。#nav{ -moz-transform: skew(30deg, -10deg);-webkit-transform: skew(30deg, -10deg);}瀏覽器支援Skew屬性目前只被Firefox, Safari 和Chrome支援，而且還要使用瀏覽器的私人首碼-moz- 和-webkit-。請點擊“下一頁”，閱讀更多精彩內容。Matrix沒錯，Matrix就是矩陣，矩陣是高等數學中非常基礎的一個東東，而在CSS 3中確實一個相當進階的功能，CSS 3引入matrix函數，可以非常靈活的實現上述的各種效果。它有6個參數(a,b,c,d,e,f)，它事實上是一個3*3矩陣，經過該矩陣將舊的參數 轉換成新值：| a b e || c d f || 0 0 1 |如果你有興趣深入研究，可以看一下這裡http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined，這是SVG的一個文檔，但是對於matrix變換的原理是通用的。讓我們來看一個例子吧：#nav{ -moz-transform: matrix(1, -0.2, 0, 1, 0, 0);-webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);}瀏覽器支援可喜的是，IE支援matrix濾鏡，雖然它不支援大部分CSS3變形功能，但是使用它的這個濾鏡，基本也可以實現相同的效果，不過，你要先搞明白矩陣運算再說。webkit和Firefox(3.5+)都支援該功能。請點擊“下一頁”，閱讀更多精彩內容。鏈式變形變形常常是單獨的，但是如果你想同時用到多種變形，代碼也是可以快速整合的，特別是使用私人擴充。幸運的是，我們有一些內建的縮寫：#nav{ -moz-transform: translate(10, 25);  -webkit-transform: translate(10, 25);  -moz-transform: rotate(90deg);  -webkit-transform: rotate(90deg);  -moz-transform: scale(2, 1);  -webkit-transform: scale(2, 1); }這些變形可以被鏈到一起，從而讓你的代碼更高效:nav{ -moz-transform: translate(10, 25) rotate(90deg) scale(2, 1); -webkit-transform: translate(10, 25) rotate(90deg) scale(2, 1);  } 這些屬性的真正的威力是合并到一起。你可以移動、旋轉、縮放並控制任何內嵌元素和區塊層級元素而不使用JavaScript。一旦這些屬性的支援變的更加廣泛，我們就可以建立更豐富和更輕量的介面和應用。transform-origintransform-origin不是transform的一個子功能，但是和transform關係 非常密切。它可以用來指定transform的起點，比如，rotate變形的預設起點是其中間，你可以將起點設定在左上方，或者左下角，這樣 rotate變形的結果就可能大不相同了。transform-origin接受兩個參數，它們可以是百分比，em，px等具體的值，也可以是left,center,right，或者 top,middle,bottom等描述性參數。幾個例子：.class1{-moz-transform-origin: 0 0;-webkit-transform-origin: 0 0;...}.class2{-moz-transform-origin:100% 100%;-webkit-transform-origin:100% 100%;...}.class3{-moz-transform-origin:top left;-webkit-transform-origin:top left;...}瀏覽器安全色性該屬性目前也只有webkit和firefox支援，而且需要添加各自的私人首碼。transition(轉換)一個涉及到CSS屬性的基本的轉換就是定義和移動一個元素從它的靜止狀態(比如，深藍色背景)到它的hover或者啟用狀態(比如，淺藍色背景)。轉換可以和變形同時使用(以及引發諸如:hover 或:focus事件)以建立一些動畫。淡出背景色彩，滑動一個元素以及讓一個對象旋轉都可以通過CSS轉換實現。 #nav a{ } #nav a:hover, #nav a:focus{     -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-outtransition-delay這個比較容易理解，就是轉換延遲的時間。時間可以為正整數、負整數和零，非零的時候必須設定單位是s(秒)或者ms(毫秒)，為負數的時候，轉換的動作會從該時間點開始顯示，之前的動作被截斷。語句可以縮寫為：-webkit-transition：background 1s linear 2s;註：參數部分為翻譯時添加，原文中沒有。瀏覽器支援像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;   -webkit-transform-style: preserve-3d;  -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-functionanimation-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的前景是光明的，特別是因為這些類似動畫的高度實驗性的屬性。儘管很多屬性對客戶或進階產品工作還不可用，至少他們很有趣！我們都期待著有一天，我們可以支援所有平台，以建立一些真的很棒的輕量級應用。關於原作者Tim Wright是一位網頁設計師/開發工程師和博主。他從2004年就成為一名web標準和易用性的倡導者。你可以在 CSSKarma.com 上找到他寫的更多文章，或者  follow Tim on Twitter 。 ZT FROM HP:http://blog.sina.com.cn/s/blog_74d6cedd0100q0yd.html 

CSS3 動畫基礎