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

譯自：What You Need To Know About Behavioral CSS

請尊重版權，轉(zhuǎn)載須注明本站鏈接！

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

隨著網(wǎng)絡的發(fā)展，瀏覽器具有更強的渲染更高級代碼的能力，我們正逐步實現(xiàn)跨越所有平臺和瀏覽器的目標。我們不但可以要花費更少的時間來確保我們的盒模型在IE6中看起來正常，而且形成了鼓勵創(chuàng)新、避免hack、重前端腳本的氛圍。

網(wǎng)絡是一個非常好的環(huán)境，也是一個有豐富的知識來分享的協(xié)作社區(qū)。我們想要有圓角 ，我們就實現(xiàn)了它；我們想要多背景圖片，我們實現(xiàn)了它；我們想要邊框圖片，我們也讓它實現(xiàn)了。所以需求從來不是問題，否則，我們可能還都仍然在使用table來布局頁面而且使用過多的代碼呢。我們都知道，網(wǎng)絡無所不能。

為網(wǎng)絡而生

CSS 3的屬性比如border-radius、box-shadow和text-shadow 在webkit（Safari、Chrome等）和Gecko（Firefox）等先進的瀏覽器中的使用開始出現(xiàn)增長的勢頭。它們（這些CSS屬性）已經(jīng)為用戶創(chuàng)建更輕量的頁面和更豐富的體驗，而且它們可以優(yōu)雅的降級。然而，這些只是CSS 3能為我們做的眾多事情中的一小部分。

在本文中，我們將走的更遠，看一看變形（transformation）、轉(zhuǎn)換（transition）和動畫（animation） 等更高級的CSS3技術。我們將涉及代碼本身、瀏覽器支持以及一些可以正確地展示這些新屬性是如何即提升你的設計又增強整體用戶體驗的例子。

CSS 變形（Transformation）

CSS transformation是W3C的一個草案。但當我第一次坐下來閱讀它的全部特性以了解一些東西的時候，它并沒有讓我感到開竅。你可以想象的到，這個文檔是用技術術語的撰寫的，而且它更關注變形的圖形（比如繪圖）元素和矩陣。大一學習微積分之后就沒有碰過矩陣了，我必須為本章節(jié)做很多好的舊瀏覽器測試以及猜測和檢驗。

在看完我能找到的每一個教程和大量的瀏覽器測試之后，我總結出一些大家都能從中獲益的有用的關于CSS變形的信息。

transform

transform屬性實現(xiàn)了一些可用SVG實現(xiàn)的同樣的功能。它可用于內(nèi)聯(lián)（inline）元素和塊級（block）元素。它允許我們旋轉(zhuǎn)、縮放和移動元素——只需要一行CSS代碼。

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

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

rotate

Rotate（旋轉(zhuǎn)）允許你通過傳遞一個度數(shù)值來轉(zhuǎn)動一個對象。

scale

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

translate

Translate就是基于X和Y 坐標重新定位元素

skew

顧名思義，skew就是要將對象傾斜，參數(shù)是度數(shù)

matrix

transform支持矩陣變換，就是基于X和Y 坐標重新定位元素

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