譯文：你需要知道的CSS3 動(dòng)畫技術(shù)

譯自：What You Need To Know About Behavioral CSS

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

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

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

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

為網(wǎng)絡(luò)而生

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

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

CSS 變形（Transformation）

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

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

transform

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

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

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

rotate

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

scale

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

translate

Translate就是基于X和Y 坐標(biāo)重新定位元素

skew

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

matrix

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

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