隨著網(wǎng)絡(luò)的發(fā)展，瀏覽器具有更強(qiáng)的渲染更高級代碼的能力，我們正逐步實現(xiàn)跨越所有平臺和瀏覽器的目標(biāo)。我們不但可以要花費(fèi)更少的時間來確保我們的盒模型在IE6中看起來正常，而且形成了鼓勵創(chuàng)新、避免hack、重前端腳本的氛圍。
網(wǎng)絡(luò)是一個非常好的環(huán)境，也是一個有豐富的知識來分享的協(xié)作社區(qū)。我們想要有圓角，我們就實現(xiàn)了它；我們想要多背景圖片，我們實現(xiàn)了它；我們想要 邊框圖片，我們也讓它實現(xiàn)了。所以需求從來不是問題，否則，我們可能還都仍然在使用table來布局頁面而且使用過多的代碼呢。我們都知道，網(wǎng)絡(luò)無所不能。
為網(wǎng)絡(luò)而生
CSS 3的屬性比如border-radius、box-shadow和 text-shadow在 webkit(Safari、Chrome等)和Gecko(Firefox)等先進(jìn)的瀏覽器中的使用開始出現(xiàn)增長的勢頭。它們(這些CSS屬性)已經(jīng)為用戶創(chuàng)建更輕量的頁面和更豐富的體驗，而且它們可以優(yōu)雅的降級。然而，這些只是CSS 3能為我們做的眾多事情中的一小部分。
在本文中，我們將走的更遠(yuǎn)，看一看 變形(transformation)、轉(zhuǎn)換(transition)和動畫(animation)等更高級的CSS3技術(shù)。我們將涉及代碼本身、瀏覽器支持以及一些可以正確地展示這些新屬性是如何即提升你的設(shè)計又增強(qiáng)整體用戶體驗的例子。
CSS 變形(Transformation)
CSS transformation是W3C的一個草案。但當(dāng)我第一次坐下來閱讀它的全部特性以了解一些東西的時候，它并沒有讓我感到開竅。你可以想象的到，這個文檔是用技術(shù)術(shù)語的撰寫的，而且它更關(guān)注變形的圖形(比如繪圖)元素和矩陣。大一學(xué)習(xí)微積分之后就沒有碰過矩陣了，我必須為本章節(jié)做很多好的舊瀏覽器測試以及猜測和檢驗。
在看完我能找到的每一個教程和大量的瀏覽器測試之后，我總結(jié)出一些大家都能從中獲益的有用的關(guān)于CSS變形的信息。
transform
transform屬性實現(xiàn)了一些可用SVG實現(xiàn)的同樣的功能。它可用于內(nèi)聯(lián)(inline)元素和塊級(block)元素。它允許我們旋轉(zhuǎn)、縮放和移動元素——只需要一行CSS代碼。
一些前衛(wèi)設(shè)計的最大詬病就是文字不可選(必須要使用切圖的方法實現(xiàn))。當(dāng)你熟練使用transform屬性來控制文字的時候，這就不再是問題了，因為這是個純CSS方法，所以元素內(nèi)的文字會保持可選。這是CSS相對于使用圖片(或背景圖片)的一個巨大優(yōu)勢。
一些有趣而有用的變形功能：
rotate
Rotate(旋轉(zhuǎn))允許你通過傳遞一個度數(shù)值來轉(zhuǎn)動一個對象。 scale
Scale是一個縮放功能，可以讓任一元素變的更大。它使用正數(shù)和負(fù)數(shù)以及小數(shù)作為參數(shù)。 translate
Translate就是基于X和Y 坐標(biāo)重新定位元素 skew
顧名思義，skew就是要將對象傾斜，參數(shù)是度數(shù) matrix
transform支持矩陣變換，就是基于X和Y 坐標(biāo)重新定位元素 <
讓我們更深入的了解每一個功能吧。
Rotate
transform屬性有很多用法，其中一個就是translate(旋轉(zhuǎn))。translate就是基于角度轉(zhuǎn)動一個對象并可用于內(nèi)聯(lián)元素和塊級元素，它可以實現(xiàn)很酷的效果。
1 2 3 4 5 6
#nav{ -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
請注意在IE8中(非標(biāo)準(zhǔn)模式)它需要你寫成“-ms-filter”而不是“filter”。
瀏覽器支持
瀏覽器對translate的支持令人驚奇的廣泛。在上面的CSS片段中，我們直接加上-webkit-和-moz-前綴然后將#nav元素旋轉(zhuǎn)-90度。
相當(dāng)簡單吧？唯一的問題是對于一個相當(dāng)重要的設(shè)計元素，如果IE不支持，很多設(shè)計師就會不情愿使用它。
幸運(yùn)的是，IE有這方面的濾鏡:圖形旋轉(zhuǎn)濾鏡。它可以有4個旋轉(zhuǎn)值：0, 1, 2,和3。你將不會獲得和Webkit和Gecko一樣的精密控制，但是至少在一定程度上保持統(tǒng)一(甚至IE6)。雖然這個濾鏡只支持4個值，顯得有些雞肋，但是對于IE來說，聊勝于無吧。
另外，非常值得一提的是，Opera在前幾天發(fā)布了Opera 10.50 pre版本，聲稱支持CSS3 的transition和transform。只是還是需要使用私有屬性，也就是要使用前綴 -o-
[Page: ]
scale
scale并不像你想象的那樣工作：簡單的縮小和放大一個元素?？s放功能同時采用寬和高兩個值，這些值可以是正數(shù)、負(fù)數(shù)和小數(shù)。
正數(shù)值放大一個元素，正如你期望的那樣，基于指定的寬度和高度。
負(fù)數(shù)值并不會縮小元素，而是翻轉(zhuǎn)它(比如，文字被反轉(zhuǎn))然后相應(yīng)的縮放它。然而，你可以使用小于1的小數(shù)(例如.5)來收縮或者縮小一個元素。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
#nav { /* nav元素的寬和高都會被放大雙倍 */ -webkit-transform: scale(2); -moz-transform: scale(2); -o-transform: scale(2); } #nav { /* nav元素的寬會是雙倍，而高度保持不變 */ -webkit-transform: scale(2, 1); -moz-transform: scale(2, 1); -o-transform: scale(2, 1); } #nav { /* nav的寬度將是雙倍，并且水平翻轉(zhuǎn)，但是高度保持不變 */ -webkit-transform: scale(-2, 1); -moz-transform: scale(-2, 1); -o-transform: scale(-2, 1); }
瀏覽器支持
scale屬性目前只有Firefox, Safari/Chrome以及 opera 10.50支持，到目前為止沒有一個IE版本支持。縮放一個對象是相當(dāng)有意義的設(shè)計選擇。它可以通過漸進(jìn)增強(qiáng)來使用:hover，這可以在你的導(dǎo)航上添加一個小小的趣味。
1 2 3 4 5 6
#nav li a:hover{ /* 這可以讓你的導(dǎo)航鏈接在鼠標(biāo)經(jīng)過的時候輕微的放大 */ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); }
[Page: ]
translate
這個名稱“translate(轉(zhuǎn)化)”有點(diǎn)容易誤解。它事實上是一種使用X和Y坐標(biāo)值定位元素的方法。
1 2 3 4 5 6
#nav{ /* 這會將nav元素向左移動10像素并向下移動20像素 */ -moz-transform: translate(10px, 20px); -webkit-transform: translate(10px, 20px); -o-transform: translate(10px, 20px); }
瀏覽器支持
translate屬性目前只被Firefox, Safari/Chrome和Oprea 10.5支持，而且還要使用瀏覽器的私有前綴-moz- 和-webkit-。
Skew
Skew也是一個很有用的transform功能，它可以將一個對象圍繞著x和y軸按照一定的角度傾斜。這和rotate的旋轉(zhuǎn)不一樣，rotate只是旋轉(zhuǎn)，而不會讓元素的形狀改變。skew會讓一個元素的形狀改變。skew有兩個參數(shù)，分別代表x和y軸的傾斜度數(shù)。
1 2 3 4 5 6
#nav{ /* 這會將nav元素向左移動10像素并向下移動20像素 */ -moz-transform: skew(30deg, -10deg); -webkit-transform: skew(30deg, -10deg); -o-transform: skew(30deg, -10deg); }
瀏覽器支持
Skew屬性目前只被Firefox, Safari/Chrome和Oprea 10.5支持，而且還要使用瀏覽器的私有前綴-moz- 和-webkit-。
Matrix
沒錯，Matrix就是矩陣，矩陣是高等數(shù)學(xué)中非?；A(chǔ)的一個東東，而在CSS 3中確實一個相當(dāng)高級的功能，CSS 3引入matrix函數(shù)，可以非常靈活的實現(xiàn)上述的各種效果。它有6個參數(shù)(a,b,c,d,e,f)，它事實上是一個3*3矩陣，經(jīng)過該矩陣將舊的參數(shù)轉(zhuǎn)換成新值：
| a b e |
| c d f |
| 0 0 1 |
如果你有興趣深入研究，可以看一下這里http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined，這是SVG的一個文檔，但是對于matrix變換的原理是通用的。
讓我們來看一個例子吧：
1 2 3 4 5 6
#nav{ /* nav元素將會像右上角傾斜 */ -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0); -o-transform: matrix(1, -0.2, 0, 1, 0, 0); }
瀏覽器支持
可喜的是，IE支持matrix濾鏡，雖然它不支持大部分CSS3變形功能，但是使用它的這個濾鏡，基本也可以實現(xiàn)相同的效果，不過，你要先搞明白矩陣運(yùn)算再說。webkit和Firefox(3.5+)、Opera 10.5都支持該功能。
[Page: ]
鏈?zhǔn)阶冃?/STRONG>
變形常常是單獨(dú)的，但是如果你想同時用到多種變形，代碼也是可以快速整合的，特別是使用私有擴(kuò)展。幸運(yùn)的是，我們有一些內(nèi)置的縮寫：
1 2 3 4 5 6 7 8 9 10 11
#nav{ -moz-transform: translate(10, 25); -webkit-transform: translate(10, 25); -o-transform: translate(10, 25); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -moz-transform: scale(2, 1); -webkit-transform: scale(2, 1); -o-transform: scale(2, 1); }
這些變形可以被鏈到一起，從而讓你的代碼更高效:
1 2 3 4 5
#nav{ -moz-transform: translate(10, 25) rotate(90deg) scale(2, 1); -webkit-transform: translate(10, 25) rotate(90deg) scale(2, 1); -o-transform: translate(10, 25) rotate(90deg) scale(2, 1); }
這些屬性的真正的威力是合并到一起。你可以移動、旋轉(zhuǎn)、縮放并控制任何內(nèi)聯(lián)元素和塊級元素而不使用JavaScript。一旦這些屬性的支持變的更加廣泛，我們就可以創(chuàng)建更豐富和更輕量的界面和應(yīng)用。
transform-origin
transform-origin不是transform的一個子功能，但是和transform關(guān)系非常密切。它可以用來指定transform的起點(diǎn)，比如，rotate變形的默認(rèn)起點(diǎn)是其中間，你可以將起點(diǎn)設(shè)置在左上角，或者左下角，這樣rotate變形的結(jié)果就可能大不相同了。
transform-origin接受兩個參數(shù)，它們可以是百分比，em，px等具體的值，也可以是left,center,right，或者 top,middle,bottom等描述性參數(shù)。幾個例子：
1 2 3 4 5 6 7 8 9 10 11 12 13
.class1{-moz-transform-origin: 0 0; -webkit-transform-origin: 0 0; -o-transform-origin: 0 0; ... } .class2{-moz-transform-origin:100% 100%; -webkit-transform-origin:100% 100%; -o-transform-origin:100% 100%; ...} .class3{-moz-transform-origin:top left; -webkit-transform-origin:top left; -o-transform-origin:top left; ...}
瀏覽器兼容性
該屬性目前也只有webkit、firefox和Opera 10.5支持，而且需要添加各自的私有前綴。
[Page: ]
transition(轉(zhuǎn)換)
一個涉及到CSS屬性的基本的轉(zhuǎn)換就是定義和移動一個元素從它的靜止?fàn)顟B(tài)(比如，深藍(lán)色背景)到它的hover或者激活狀態(tài)(比如，淺藍(lán)色背景)。
轉(zhuǎn)換可以和變形同時使用(以及引發(fā)諸如:hover 或:focus事件)以創(chuàng)建一些動畫。淡出背景色彩，滑動一個元素以及讓一個對象旋轉(zhuǎn)都可以通過CSS轉(zhuǎn)換實現(xiàn)。
1 2 3 4 5 6 7 8 9 10
#nav a{ background-color:red; } #nav a:hover, #nav a:focus{ background-color:blue; /* 告訴轉(zhuǎn)換去應(yīng)用到background-color 屬性(看起來像一個CSS 參數(shù)，不是嗎？ #foreshadowing)*/ -webkit-transition-property:background-color; -o-transition-property:background-color; /* 讓它持續(xù)兩秒鐘*/ -webkit-transition-duration:2s; -o-transition-duration:2s; }
轉(zhuǎn)換的一些參數(shù)
transition-property
指定轉(zhuǎn)換的CSS屬性名稱，比如，上面的例子中，將轉(zhuǎn)換應(yīng)用于background-color屬性。
transition-duration
定義轉(zhuǎn)換花費(fèi)的時間（從舊屬性換到新屬性花費(fèi)的時間）
transition-timing-function
可以理解為過度效果。指定轉(zhuǎn)換過程中的中間值?？梢杂胏ubic-bezier指定。當(dāng)然有幾個常用的內(nèi)置值：ease | linear | ease-in | ease-out | ease-in-out
transition-delay
這個比較容易理解，就是轉(zhuǎn)換延遲的時間。時間可以為正整數(shù)、負(fù)整數(shù)和零，非零的時候必須設(shè)置單位是s(秒)或者ms(毫秒)，為負(fù)數(shù)的時候，轉(zhuǎn)換的動作會從該時間點(diǎn)開始顯示，之前的動作被截斷。
瀏覽器支持
像transform屬性一樣酷，但是目前只有WebKit瀏覽器支持。Opera 10.5 pre版本也可以通過添加-o-前綴來支持。-moz-transition已經(jīng)在最近的nightly-build版本的Firefox 3.7中可用。你也可以添加-moz-transition到你的CSS中以實現(xiàn)將來的增強(qiáng)。甚至可以添加一個不用私有前綴的屬性，以防萬一。
Animation
動畫是CSS 3最有用的地方。你可以將我們在上面討論的所有的元素與動畫屬性比如animation-duration、animation-name 和animation-timing-function整合以創(chuàng)建像Flash動畫一樣的效果——純CSS。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
#rotate { margin: 0 auto; width: 600px; height: 400px; /* 確保我們是在一個 3-D 空間 */ -webkit-transform-style: preserve-3d; /*讓整個行使用x-軸旋轉(zhuǎn)、7秒中的動畫、無限次播放以及線性 */ -webkit-animation-name: x-spin; -webkit-animation-duration: 7s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } /* 定義要調(diào)用的動畫 */ @-webkit-keyframes x-spin { 0% { -webkit-transform: rotateX(0deg); } 50% { -webkit-transform: rotateX(180deg); } 100% { -webkit-transform: rotateX(360deg); } }
這個夢幻的CSS動畫代碼和在線演示可以在webkit網(wǎng)站看到。該演示可以在任何網(wǎng)站看到，但是動畫效果卻只能在Mac os(雪豹)的WebKit的nightly build版本可見。它看起來就像上面的視頻中的一樣，如果你是在用mac os (雪豹版本)，我認(rèn)為安裝一個webkit以親眼看看這個效果是很值得的(它真的很酷)。Windows系統(tǒng)用戶暫時無法欣賞這個效果。
animation的一些參數(shù)
animation的參數(shù)和translate有些像，所以如果你理解了translate的參數(shù)，這里就不難理解了。
animation-name
動畫的名稱。
animation-duration
定義動畫播放一次需要的時間。默認(rèn)為0；
animation-timing-function
定義動畫播放的方式，參數(shù)設(shè)置類似transition-timing-function
animation-delay
定義動畫開始的時間
animation-iteration-count
定義循環(huán)的次數(shù)，infinite即為無限次。默認(rèn)是1。
-webkit-animation-direction
動畫播放的方向，兩個值，默認(rèn)為normal，這個時候動畫的每次循環(huán)都向前播放。另一個值是alternate，則第偶數(shù)次向前播放，第奇數(shù)次向反方向播放。
瀏覽器支持
不幸的是，目前，只有少數(shù)瀏覽器支持CSS動畫。2D CSS animations 可以在Safari 4 (Leopard)、Chrome 3、Safari Mobile、Shira 以及其它Webkit 瀏覽器中工作。Safari 4 (Snow Leopard)支持3D動畫
總結(jié)
現(xiàn)在，JavaScript可以在CSS 3完善之前彌補(bǔ)這個差距。遺憾的是，讓所有瀏覽器支持這些很棒的屬性可能需要一個很長的過程。不用等待那一天的到來，我們可以先使用一些嚴(yán)謹(jǐn)?shù)臐u進(jìn)增強(qiáng)以及以來Javascript來增強(qiáng)我們的網(wǎng)站和應(yīng)用。這不是件壞事，至少現(xiàn)在看起來是。
看了最近的IE9的公告，如果IE團(tuán)隊添加這些屬性中的一些到這個新的版本的瀏覽器中我不會感到驚訝，他們已經(jīng)開始考慮整合CSS3了(border-radius)。
web的前景是光明的，特別是因為這些類似動畫的高度實驗性的屬性。盡管很多屬性對客戶或高級產(chǎn)品工作還不可用，至少他們很有趣！我們都期待著有一天，我們可以支持所有平臺，以建立一些真的很棒的輕量級應(yīng)用。
參考與資源
A Crash Course in Advanced CSS3 Effects
Net Tuts 發(fā)布的一個很酷的關(guān)于CSS3效果的視頻。 Webkit Announces Support for CSS 3D Transforms
CSS3.info 制作的一個使用CSS3動畫的demo，目前只支持nightly build 版的WebKit. Jonathan Snook on CSS Text Rotation
Jonathan Snook 講述即將到來的CSS3 屬性. DEV Camp CSS3 Tricks
一份來自Dan Kurtz的幻燈演示 W3C Spec on 2-D Transformations
關(guān)于2-D 變換的資源. W3C Spec on 3-D Transformations
一個關(guān)于3-D 變換的資源. W3C Spec on CSS3 Animations
CSS animations的W3C工作草案 Safari CSS參考 MDC:Using CSS transforms MDC: -moz-transform <
關(guān)于原作者
Tim Wright是一位網(wǎng)頁設(shè)計師/開發(fā)工程師和博主。他從2004年就成為一名web標(biāo)準(zhǔn)和易用性的倡導(dǎo)者。你可以在CSSKarma.com上找到他寫的更多文章，或者follow Tim on Twitter。
譯自：你需要知道的CSS3 動畫技術(shù)
譯自：What You Need To Know About Behavioral CSS
