CSS3變換 教你簡單快速實現(xiàn)簡單的變換效果
作者：佚名
我們需要的是快速而簡單的方法來給頁面添加簡單的變換(transition)效果。在本文中，你會發(fā)現(xiàn)很有用的關(guān)于CSS變換(transition)以及如何使用它們的信息
譯自：CSS transitions 101
中文：CSS3 變化入門
原作者：Jason Cranford Teague
譯者：神飛
本文中關(guān)于CSS變換(transition)以及如何使用它們的信息我們需要的是快速而簡單的方法來給頁面添加簡單的變換(transition)效果。
幾個月之前，我就建議設(shè)計師應(yīng)該開始使用新的CSS 3 技術(shù)來實現(xiàn)一些它們渴求已久的基本的功能了——唯一的問題就是，這些技術(shù)沒有一個能在IE中可用，包括IE8。
一些讀者認(rèn)為的那些技術(shù)將會有75%的用戶看不到的觀點是不靠譜的。
對那些讀者我想說，“坐穩(wěn)了”，因為我將要向你介紹另一個新的CSS屬性，它允許你通過簡單的幾行代碼來為任意元素添加很酷的變換效果。
CSS 變換剛剛在CSS 3中被引入，但是已經(jīng)被添加為webkit的擴(kuò)展了。也就是說，現(xiàn)在它們只能用于基于webkit內(nèi)核的瀏覽器，包括Apple Safari和Google Chrome。不過從Opera 10.5 pre-Alpha版本來看，Opera將在下一個10.5中支持CSS 3變換。
變換曾經(jīng)只是Webkit的一部分，而且是Safari UI能做而其它瀏覽器不能實現(xiàn)的一些很酷的東東的基礎(chǔ)。
但是W3C CSS工作組曾經(jīng)拒絕將變換添加到它的官方特性里面，一些成員堅持認(rèn)為變換并非CSS屬性而通過腳本來處理會更好。但是很多設(shè)計師和開發(fā)人員，包括我自己，堅持認(rèn)為這確實是樣式——只是動態(tài)樣式，而不是我們?nèi)粘Ｊ褂玫膫鹘y(tǒng)的靜態(tài)樣式。
幸運的是，關(guān)于動態(tài)樣式的爭論已經(jīng)成為過去。去年三月份，來自Apple和Mozilla的代表們開始將CSS變換模塊添加到CSS 3特性里面，非常接近Apple已經(jīng)添加到webkit中的表現(xiàn)。
關(guān)于設(shè)計增強(qiáng)的一些建議
在我們繼續(xù)之前，讓我強(qiáng)調(diào)一點：永遠(yuǎn)不要讓網(wǎng)站的功能依賴樣式，如果該樣式不是瀏覽器通用的話(也就是說，所有的常用瀏覽器都支持)。
對錯過的同學(xué)再一次強(qiáng)調(diào)：永遠(yuǎn)不要讓網(wǎng)站的功能依賴樣式，如果該樣式不是瀏覽器通用的話。
這也就是說，你可以使用樣式，比如變換，作為設(shè)計增強(qiáng)以提高用戶體驗——在不犧牲看不到它們的用戶的可用性的前提下。如果你不用CSS變換照樣能用而且用戶依然能夠完成他們的任務(wù)，就沒問題，你就可以使用CSS變換。
CSS變換將不會替代所有的DHTML，不過它會提供一些支持過渡的方法來提高您在瀏覽器中的設(shè)計。
你需要到下載Apple Safari 3+ 或Google Chrome瀏覽器來查看這些變換效果。這兩個瀏覽器都支持Mac和PC系統(tǒng)。
CSS變換、狀態(tài)與動作
但是請稍等一下。在深入了解變換之前，我們需要理解一個元素能變換的不同的狀態(tài)。
狀態(tài)定義當(dāng)前頁面中相應(yīng)的元素如何與用戶進(jìn)行交互，它們在CSS中通過偽類來定義，比如當(dāng)鼠標(biāo)經(jīng)過一個原屬時元素就會被偽類hover偽類控制。
|
動態(tài)偽類 |
起作用的元素 |
描述 |
|
:link |
只有鏈接 |
未訪問的鏈接 |
|
visited |
只有鏈接 |
訪問過的鏈接 |
|
:hover |
所有元素 |
鼠標(biāo)經(jīng)過元素 |
|
:active |
所有元素 |
鼠標(biāo)點擊元素 |
|
:focus |
所有可被選中的元素 |
元素被選中 |
|
None |
所有元素 |
所有元素的默認(rèn)狀態(tài) |
變換通過改變不同元素狀態(tài)之間的一個時間段內(nèi)的樣式來起作用。比如，一個元素的默認(rèn)狀態(tài)的顏色值將會在呈現(xiàn)hover狀態(tài)的色彩值之前逐漸顯示色盤中的中間顏色。
一個簡單的變換
讓我們假設(shè)一個簡單的變換，在用戶的鼠標(biāo)經(jīng)過一個鏈接的時候，將顏色從一個變換成另外一個。與其它CSS屬性一樣，變換也是直接添加到要使用它的選擇器中。該屬性可以采用下面的4個值。
CSS property
被變換的屬性(比如, color)。看一下下面的表格了解所有可以被變換的CSS屬性列表。
Duration
變換持續(xù)的時間，通常以秒來計算(比如, .25s).
Timing function
允許你控制持續(xù)的時間的計算方式。與其使用一個簡單的線性計算，你可以使變換加速(漸入)或者減速(淡出)，或者甚至specify a beat or count (比如，linear). More on this later in the article.
Delay
在動作和變換開始之間等待多久，通常用秒來表示(比如, .1s)。如果你不想延遲，該值可省略。
因為變換屬性始于Webkit擴(kuò)展，我們不得不同時使用transition 和-webkit-transition 屬性以向后兼容。
讓我們首先提阿賈這這些屬性到:hover 偽類中:
那么現(xiàn)在，當(dāng)鼠標(biāo)經(jīng)過一個鏈接，不會直接從藍(lán)色跳轉(zhuǎn)到紅色，而是用四分之一秒的時間逐漸變換它們的中間顏色(過渡顏色)。
- 1. a:hover {
- 2. color: red;
當(dāng)然，我們也希望變換回到默認(rèn)的鏈接顏色，那么我們可以添加一個變換到:link (以及:visited)偽類上，并在它褪去之前添加一個簡單的延遲(十分之一秒) :
當(dāng)然，我們也希望變換回到默認(rèn)的鏈接顏色，那么我們可以添加一個變換到:link (以及:visited)偽類上，并在它褪去之前添加一個簡單的延遲(十分之一秒) :
- 1. a:link, a:visited {
- 2. color: blue;
- 3. -webkit-transition: color .25s linear .1s;
- 4. transition: color .25s linear .1s;
- 5. }
因為一個變換就是一個CSS屬性，如果你在同一個CSS規(guī)則中添加多個變換的實例，那么***的那個將會覆蓋前面的，而不是添加它們。所以在下面的規(guī)則中，唯一的變換將是背景色彩：
- 1. a:hover {
- 2. color: red;
- 3. background-color: rgb(235,235,185);
- 4. -webkit-transition: color .25s linear;
- 5. ransition: color .25s linear;
- 6. -webkit-transition: background-color
- 7. .15s linear .1;
- 8. transition: background-color .15s linear .1;
- 9. }
當(dāng)然，這并不是說，不能添加多重變換——多重變換可以在同一個變換屬性定義中用逗號隔開：
- 1. *:link, *:visited, *:hover, *:active, *:focus {
- 2 .-webkit-transition:
- 3. color .25slinear,
- 4. background-color .25s linear,
- 5. border-color .25s linear;
- 6. transition:color .25s linear,
- 7. background-color .25s linear,
- 8. border-color .25s linear;
- 9. }
這條定義將產(chǎn)生色彩和背景色的雙重變換。
什么可以被變換？
幾乎所有的有色彩、大小或位置等組件的CSS屬性，包括許多新添加的CSS 3屬性， 都可以應(yīng)用變換。一個值得注意的例外是box-shadow。
來自W3C的變換的說明，這里是一個可以賦予變換的CSS屬性的列表，附帶轉(zhuǎn)變的對象，我也高亮了一些比較有用的屬性。
|
CSS屬性 |
改變的對象 |
|
background-color |
色彩 |
|
background-image |
只是漸變 |
|
background-position |
百分比，長度 |
|
border-bottom-color |
色彩 |
|
border-bottom-width |
長度 |
|
border-color |
色彩 |
|
border-left-color |
色彩 |
|
border-left-width |
長度 |
|
border-right-color |
色彩 |
|
border-right-width |
長度 |
|
border-spacing |
長度 |
|
border-top-color |
色彩 |
|
border-top-width |
長度 |
|
border-width |
長度 |
|
bottom |
百分比，長度 |
|
color |
色彩 |
|
crop |
百分比 |
|
font-size |
百分比，長度 |
|
font-weight |
數(shù)字 |
|
grid-* |
數(shù)量 |
|
height |
百分比，長度 |
|
left |
百分比，長度 |
|
letter-spacing |
長度 |
|
line-height |
百分比，長度，數(shù)字 |
|
margin-bottom |
長度 |
|
margin-left |
長度 |
|
margin-right |
長度 |
|
margin-top |
長度 |
|
max-height |
百分比，長度 |
|
max-width |
百分比，長度 |
|
min-height |
百分比，長度 |
|
min-width |
百分比，長度 |
|
opacity |
數(shù)字 |
|
outline-color |
色彩 |
|
outline-offset |
整數(shù) |
|
outline-width |
長度 |
|
padding-bottom |
長度 |
|
padding-left |
長度 |
|
padding-right |
長度 |
|
padding-top |
長度 |
|
right |
百分比，長度 |
|
text-indent |
百分比，長度 |
|
text-shadow |
陰影 |
|
top |
百分比，長度 |
|
vertical-align |
百分比，長度，關(guān)鍵詞 |
|
visibility |
可見性 |
|
width |
百分比，長度 |
|
word-spacing |
百分比，長度 |
|
z-index |
正整數(shù) |
|
zoom |
數(shù)字 |
變換計時與延遲
使用變換，你可以改變變換的速率，在開始的時候較慢然后在結(jié)束的時候加速，反之亦然，或者之間的任何事情。CSS變換有5個計時的關(guān)鍵詞，同時也允許你自己定義你自己的計時曲線。
|
名稱 |
如何工作 |
|
cubic-bezier(x1, y1, x2, y2) |
X 和 Y 值在0到1之間，以定義用于Time function的貝塞爾曲線的形狀 |
|
linear |
均速 |
|
ease |
逐漸慢下來 |
|
ease-in |
加速(漸入) |
|
ease-out |
減速(淡出) |
|
ease-in-out |
加速然后減速 |
全部變換
變換將很快成為所有網(wǎng)站的標(biāo)準(zhǔn)操作方式，從而增強(qiáng)用戶界面的體驗。
為了給你的整個網(wǎng)站添加一個普遍的變換，一個做法就是添加一個變換到全體選擇器，類似CSS reset。下面的代碼會給頁面中的所有元素添加一個默認(rèn)的變換，從而允許你保持一個統(tǒng)一的變換效果：
- 1. *:link, *:visited, *:hover, *:active, *:focus {
- 2 .-webkit-transition:
- 3. color .25slinear,
- 4. background-color .25s linear,
- 5. border-color .25s linear;
- 6. transition:color .25s linear,
- 7. background-color .25s linear,
- 8. border-color .25s linear;
- 9. }
一個反對全部變換，同時明確反對使用全體選擇器作為CSS reset的觀點是，將一個樣式用到頁面的所有元素會減緩頁面的渲染。然而，我并沒有發(fā)現(xiàn)任何有關(guān)與此的證據(jù)。有人知道嗎？
CSS 變換就這么簡單，它并不難理解，而且你也不用些大量的JS腳本來實現(xiàn)它，這很方便實用，多做幾次練習(xí)，你就可以熟練的使用它了。
譯注：本文原文題目為 CSS transitions 101，101這個數(shù)字比較不好理解，其實美國大學(xué)***門課程通常編號為101，所以101一般表示入門、初級的意思。另外關(guān)于 transition 這個詞的翻譯，我之前是翻譯成“轉(zhuǎn)換”，但是這個翻譯很別扭，在twitter上和 @gaowhen、@ghostzhang、@ivane、@hiwanz、@cnjoel等人討論后，覺得翻譯成“變換”更合適一些，多謝各位。——神飛
【編輯推薦】
- CSS HACK區(qū)別IE6、IE7、IE8、Firefox兼容性
- 專家解答 JS如何操作css中float屬性寫法
- 20個HTML 5和CSS3的免費網(wǎng)站模板與教程
- 用CSS 3將你的設(shè)計水平帶入下個高度
- IE9下CSS3多種新功能嘗鮮
責(zé)任編輯：佚名
來源：
www.qianduan.net
