你需要知道的CSS3動畫技術

譯文： 你需要知道的CSS3 動畫技術

譯自： What You Need To Know About Behavioral CSS

請尊重版權，轉載須註明本站連結！

譯：本文譯自Smashingmagazine，但是原文講述的內容有些淺，也不是很完整，前端觀察在翻譯的前提下，增加了更多的更系統的內容。如有不足之處，歡迎指正補充。

隨著網路的發展，瀏覽器具有更強的渲染更高級程式碼的能力，我們正逐步實現跨越所有平台和瀏覽器的目標。我們不但可以花更少的時間來確保我們的盒子模型在IE6中看起來正常，而且形成了鼓勵創新、避免hack、重前端腳本的氛圍。

網路是一個非常好的環境，也是一個有豐富的知識可以分享的協作社群。我們想要有圓角，我們就實現了它；我們想要多背景圖片，我們實現了它；我們想要 邊框圖片，我們也讓它實現了。所以需求從來不是問題，否則，我們可能還都在使用table來佈局頁面而且使用過多的程式碼呢。我們都知道，網路無所不能。

為網路而生

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變形的信息。

transform

transform屬性實作了一些可用SVG實現的相同的功能。它可用於內聯（inline）元素和區塊級（block）元素。它允許我們旋轉、縮放和移動元素——只需要一行CSS程式碼。

有些前衛設計的最大詬病就是文字不可選（必須要用切圖的方法來實現）。當你熟練使用transform屬性來控製文字的時候，這就不再是問題了，因為這是個純CSS方法，所以元素內的文字會保持可選。這是CSS相對於使用圖片（或背景圖片）的一個巨大優勢。

一些有趣而有用的變形功能：

rotate

Rotate（旋轉）讓你透過傳遞一個度數值來轉動一個物件。

scale

Scale是一個縮放功能，可以讓任一元素變的更大。它使用正數和負數以及小數作為參數。

translate

Translate就是基於X和Y 座標重新定位元素

skew

顧名思義，skew就是要將物件傾斜，參數是度數

matrix

transform支援矩陣變換，就是基於X和Y 座標重新定位元素

下面讓我們更深入的了解每一個功能吧。

Rotate

transform屬性有許多用法，其中一個就是translate（旋轉）。 translate就是基於角度轉動一個物件並可用於內聯元素和區塊級元素，它可以實現很酷的效果。

請注意在IE8中（非標準模式）它需要你寫成「-ms-filter」而不是「filter」。

瀏覽器支援

瀏覽器對translate的支援令人驚訝的廣泛。在上面的CSS片段中，我們直接加上-webkit-和-moz-前綴然後將#nav元素旋轉-90度。

相當簡單吧？唯一的問題是對於一個相當重要的設計元素，如果IE不支持，很多設計師就會不情願使用它。

幸運的是，IE有這方面的濾鏡：圖形旋轉濾鏡。它可以有4個旋轉值：0， 1， 2，和3。你將不會獲得和Webkit和Gecko一樣的精密控制，但至少在一定程度上保持統一（甚至IE6）。雖然這個濾鏡只支援4個值，顯得有些雞肋，但對IE來說，聊勝於無吧。

scale

scale並不像你想像的那樣工作：簡單的縮小和放大一個元素。縮放功能同時採用寬和高兩個值，這些值可以是正數、負數和小數。

正數值放大一個元素，正如你所期望的那樣，基於指定的寬度和高度。

負數值並不會縮小元素，而是翻轉它（例如，文字被反轉）然後對應的縮放它。然而，你可以使用小於1的小數（例如.5）來收縮或縮小一個元素。

瀏覽器支援

scale屬性目前只有Firefox， Safari 和Chrome支持，到目前為止沒有一個IE版本支援。縮放一個物件是相當有意義的設計選擇。它可以透過漸進式增強來使用：hover，這可以在你的導航上添加一個小小的趣味。