隨著網(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ù)語(yǔ)的撰寫的，而且它更關(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è)功能吧。
Rotate
transform屬性有很多用法，其中一個(gè)就是translate(旋轉(zhuǎn))。translate就是基于角度轉(zhuǎn)動(dòng)一個(gè)對(duì)象并可用于內(nèi)聯(lián)元素和塊級(jí)元素，它可以實(shí)現(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); }
請(qǐng)注意在IE8中(非標(biāo)準(zhǔn)模式)它需要你寫成“-ms-filter”而不是“filter”。
瀏覽器支持
瀏覽器對(duì)translate的支持令人驚奇的廣泛。在上面的CSS片段中，我們直接加上-webkit-和-moz-前綴然后將#nav元素旋轉(zhuǎn)-90度。
相當(dāng)簡(jiǎn)單吧？唯一的問題是對(duì)于一個(gè)相當(dāng)重要的設(shè)計(jì)元素，如果IE不支持，很多設(shè)計(jì)師就會(huì)不情愿使用它。
幸運(yùn)的是，IE有這方面的濾鏡:圖形旋轉(zhuǎn)濾鏡。它可以有4個(gè)旋轉(zhuǎn)值：0, 1, 2,和3。你將不會(huì)獲得和Webkit和Gecko一樣的精密控制，但是至少在一定程度上保持統(tǒng)一(甚至IE6)。雖然這個(gè)濾鏡只支持4個(gè)值，顯得有些雞肋，但是對(duì)于IE來說，聊勝于無吧。
另外，非常值得一提的是，Opera在前幾天發(fā)布了Opera 10.50 pre版本，聲稱支持CSS3 的transition和transform。只是還是需要使用私有屬性，也就是要使用前綴 -o-
[Page: ]
scale
scale并不像你想象的那樣工作：簡(jiǎn)單的縮小和放大一個(gè)元素?？s放功能同時(shí)采用寬和高兩個(gè)值，這些值可以是正數(shù)、負(fù)數(shù)和小數(shù)。
正數(shù)值放大一個(gè)元素，正如你期望的那樣，基于指定的寬度和高度。
負(fù)數(shù)值并不會(huì)縮小元素，而是翻轉(zhuǎn)它(比如，文字被反轉(zhuǎn))然后相應(yīng)的縮放它。然而，你可以使用小于1的小數(shù)(例如.5)來收縮或者縮小一個(gè)元素。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
#nav { /* nav元素的寬和高都會(huì)被放大雙倍 */ -webkit-transform: scale(2); -moz-transform: scale(2); -o-transform: scale(2); } #nav { /* nav元素的寬會(huì)是雙倍，而高度保持不變 */ -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支持，到目前為止沒有一個(gè)IE版本支持?？s放一個(gè)對(duì)象是相當(dāng)有意義的設(shè)計(jì)選擇。它可以通過漸進(jìn)增強(qiáng)來使用:hover，這可以在你的導(dǎo)航上添加一個(gè)小小的趣味。
1 2 3 4 5 6
#nav li a:hover{ /* 這可以讓你的導(dǎo)航鏈接在鼠標(biāo)經(jīng)過的時(shí)候輕微的放大 */ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); }
[Page: ]
translate
這個(gè)名稱“translate(轉(zhuǎn)化)”有點(diǎn)容易誤解。它事實(shí)上是一種使用X和Y坐標(biāo)值定位元素的方法。
1 2 3 4 5 6
#nav{ /* 這會(huì)將nav元素向左移動(dòng)10像素并向下移動(dòng)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也是一個(gè)很有用的transform功能，它可以將一個(gè)對(duì)象圍繞著x和y軸按照一定的角度傾斜。這和rotate的旋轉(zhuǎn)不一樣，rotate只是旋轉(zhuǎn)，而不會(huì)讓元素的形狀改變。skew會(huì)讓一個(gè)元素的形狀改變。skew有兩個(gè)參數(shù)，分別代表x和y軸的傾斜度數(shù)。
1 2 3 4 5 6
#nav{ /* 這會(huì)將nav元素向左移動(dòng)10像素并向下移動(dòng)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
沒錯(cuò)，Matrix就是矩陣，矩陣是高等數(shù)學(xué)中非常基礎(chǔ)的一個(gè)東東，而在CSS 3中確實(shí)一個(gè)相當(dāng)高級(jí)的功能，CSS 3引入matrix函數(shù)，可以非常靈活的實(shí)現(xiàn)上述的各種效果。它有6個(gè)參數(shù)(a,b,c,d,e,f)，它事實(shí)上是一個(gè)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的一個(gè)文檔，但是對(duì)于matrix變換的原理是通用的。
讓我們來看一個(gè)例子吧：
1 2 3 4 5 6
#nav{ /* nav元素將會(huì)像右上角傾斜 */ -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變形功能，但是使用它的這個(gè)濾鏡，基本也可以實(shí)現(xiàn)相同的效果，不過，你要先搞明白矩陣運(yùn)算再說。webkit和Firefox(3.5+)、Opera 10.5都支持該功能。
[Page: ]
鏈?zhǔn)阶冃?/STRONG>
變形常常是單獨(dú)的，但是如果你想同時(shí)用到多種變形，代碼也是可以快速整合的，特別是使用私有擴(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); }
這些屬性的真正的威力是合并到一起。你可以移動(dòng)、旋轉(zhuǎn)、縮放并控制任何內(nèi)聯(lián)元素和塊級(jí)元素而不使用JavaScript。一旦這些屬性的支持變的更加廣泛，我們就可以創(chuàng)建更豐富和更輕量的界面和應(yīng)用。
transform-origin
transform-origin不是transform的一個(gè)子功能，但是和transform關(guān)系非常密切。它可以用來指定transform的起點(diǎn)，比如，rotate變形的默認(rèn)起點(diǎn)是其中間，你可以將起點(diǎn)設(shè)置在左上角，或者左下角，這樣rotate變形的結(jié)果就可能大不相同了。
transform-origin接受兩個(gè)參數(shù)，它們可以是百分比，em，px等具體的值，也可以是left,center,right，或者 top,middle,bottom等描述性參數(shù)。幾個(gè)例子：
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)換)
一個(gè)涉及到CSS屬性的基本的轉(zhuǎn)換就是定義和移動(dòng)一個(gè)元素從它的靜止?fàn)顟B(tài)(比如，深藍(lán)色背景)到它的hover或者激活狀態(tài)(比如，淺藍(lán)色背景)。
轉(zhuǎn)換可以和變形同時(shí)使用(以及引發(fā)諸如:hover 或:focus事件)以創(chuàng)建一些動(dòng)畫。淡出背景色彩，滑動(dòng)一個(gè)元素以及讓一個(gè)對(duì)象旋轉(zhuǎn)都可以通過CSS轉(zhuǎn)換實(shí)現(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 屬性(看起來像一個(gè)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)的時(shí)間（從舊屬性換到新屬性花費(fèi)的時(shí)間）
transition-timing-function
可以理解為過度效果。指定轉(zhuǎn)換過程中的中間值?？梢杂胏ubic-bezier指定。當(dāng)然有幾個(gè)常用的內(nèi)置值：ease | linear | ease-in | ease-out | ease-in-out
transition-delay
這個(gè)比較容易理解，就是轉(zhuǎn)換延遲的時(shí)間。時(shí)間可以為正整數(shù)、負(fù)整數(shù)和零，非零的時(shí)候必須設(shè)置單位是s(秒)或者ms(毫秒)，為負(fù)數(shù)的時(shí)候，轉(zhuǎn)換的動(dòng)作會(huì)從該時(shí)間點(diǎn)開始顯示，之前的動(dòng)作被截?cái)唷?/P>
瀏覽器支持
像transform屬性一樣酷，但是目前只有WebKit瀏覽器支持。Opera 10.5 pre版本也可以通過添加-o-前綴來支持。-moz-transition已經(jīng)在最近的nightly-build版本的Firefox 3.7中可用。你也可以添加-moz-transition到你的CSS中以實(shí)現(xiàn)將來的增強(qiáng)。甚至可以添加一個(gè)不用私有前綴的屬性，以防萬一。
Animation
動(dòng)畫是CSS 3最有用的地方。你可以將我們?cè)谏厦嬗懻摰乃械脑嘏c動(dòng)畫屬性比如animation-duration、animation-name 和animation-timing-function整合以創(chuàng)建像Flash動(dòng)畫一樣的效果——純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; /* 確保我們是在一個(gè) 3-D 空間 */ -webkit-transform-style: preserve-3d; /*讓整個(gè)行使用x-軸旋轉(zhuǎn)、7秒中的動(dòng)畫、無限次播放以及線性 */ -webkit-animation-name: x-spin; -webkit-animation-duration: 7s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } /* 定義要調(diào)用的動(dòng)畫 */ @-webkit-keyframes x-spin { 0% { -webkit-transform: rotateX(0deg); } 50% { -webkit-transform: rotateX(180deg); } 100% { -webkit-transform: rotateX(360deg); } }
這個(gè)夢(mèng)幻的CSS動(dòng)畫代碼和在線演示可以在webkit網(wǎng)站看到。該演示可以在任何網(wǎng)站看到，但是動(dòng)畫效果卻只能在Mac os(雪豹)的WebKit的nightly build版本可見。它看起來就像上面的視頻中的一樣，如果你是在用mac os (雪豹版本)，我認(rèn)為安裝一個(gè)webkit以親眼看看這個(gè)效果是很值得的(它真的很酷)。Windows系統(tǒng)用戶暫時(shí)無法欣賞這個(gè)效果。
animation的一些參數(shù)
animation的參數(shù)和translate有些像，所以如果你理解了translate的參數(shù)，這里就不難理解了。
animation-name
動(dòng)畫的名稱。
animation-duration
定義動(dòng)畫播放一次需要的時(shí)間。默認(rèn)為0；
animation-timing-function
定義動(dòng)畫播放的方式，參數(shù)設(shè)置類似transition-timing-function
animation-delay
定義動(dòng)畫開始的時(shí)間
animation-iteration-count
定義循環(huán)的次數(shù)，infinite即為無限次。默認(rèn)是1。
-webkit-animation-direction
動(dòng)畫播放的方向，兩個(gè)值，默認(rèn)為normal，這個(gè)時(shí)候動(dòng)畫的每次循環(huán)都向前播放。另一個(gè)值是alternate，則第偶數(shù)次向前播放，第奇數(shù)次向反方向播放。
瀏覽器支持
不幸的是，目前，只有少數(shù)瀏覽器支持CSS動(dòng)畫。2D CSS animations 可以在Safari 4 (Leopard)、Chrome 3、Safari Mobile、Shira 以及其它Webkit 瀏覽器中工作。Safari 4 (Snow Leopard)支持3D動(dòng)畫
總結(jié)
現(xiàn)在，JavaScript可以在CSS 3完善之前彌補(bǔ)這個(gè)差距。遺憾的是，讓所有瀏覽器支持這些很棒的屬性可能需要一個(gè)很長(zhǎng)的過程。不用等待那一天的到來，我們可以先使用一些嚴(yán)謹(jǐn)?shù)臐u進(jìn)增強(qiáng)以及以來Javascript來增強(qiáng)我們的網(wǎng)站和應(yīng)用。這不是件壞事，至少現(xiàn)在看起來是。
看了最近的IE9的公告，如果IE團(tuán)隊(duì)添加這些屬性中的一些到這個(gè)新的版本的瀏覽器中我不會(huì)感到驚訝，他們已經(jīng)開始考慮整合CSS3了(border-radius)。
web的前景是光明的，特別是因?yàn)檫@些類似動(dòng)畫的高度實(shí)驗(yàn)性的屬性。盡管很多屬性對(duì)客戶或高級(jí)產(chǎn)品工作還不可用，至少他們很有趣！我們都期待著有一天，我們可以支持所有平臺(tái)，以建立一些真的很棒的輕量級(jí)應(yīng)用。
參考與資源
A Crash Course in Advanced CSS3 Effects
Net Tuts 發(fā)布的一個(gè)很酷的關(guān)于CSS3效果的視頻。 Webkit Announces Support for CSS 3D Transforms
CSS3.info 制作的一個(gè)使用CSS3動(dòng)畫的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
一個(gè)關(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)頁(yè)設(shè)計(jì)師/開發(fā)工程師和博主。他從2004年就成為一名web標(biāo)準(zhǔn)和易用性的倡導(dǎo)者。你可以在CSSKarma.com上找到他寫的更多文章，或者follow Tim on Twitter。
譯自：你需要知道的CSS3 動(dòng)畫技術(shù)
譯自：What You Need To Know About Behavioral CSS
