CSS 3 變換入門

睡蓮 — Tue, 02 Feb 2010 01:32:56 +0200

類別: 語言集
來源: (http://www.webdesignerdepot.com/2010/01/css-transitions-101/)

本文譯者：神飛　　譯文出處：前端觀察 - http://www.qianduan.net/css-transitions-101.html

　　儘管人們期望在屏幕上有些改變，但是 CSS 和 HTML 對頁面中的交互能做的實在太少了，而那些還需要用代碼來實現。

　　比如一個鏈接要麼是這個顏色，要麼是那個顏色；一個文本區域要麼這麼大，要麼那麼大；一張圖片要麼是透明的要麼是不透明的；它們是從一個狀態直接變到另一個狀態——中間並沒有過渡。

　　這導致大部分網頁有些生硬，因為元素只會很死板的切換或改變。

　　是的，你可以使用 DHTML、jQuery 或者自己編寫 JS 來實現過度，但是這需要更多的代碼來實現本應該非常簡單的功能。

　　我們需要的是快速而簡單的方法來給頁面添加簡單的變換(transition)效果。在本文中，你會發現很有用的關於 CSS 變換(transition)以及如何使用它們的信息。

　　幾個月之前，我就建議設計師應該開始使用新的 CSS 3 技術來實現一些它們渴求已久的基本的功能了——唯一的問題就是，這些技術沒有一個能在 IE 中可用，包括 IE8 。

　　一些讀者認為的那些技術將會有 75% 的用戶看不到的觀點是不靠譜的。

　　對那些讀者我想說，“坐穩了”，因為我將要向你介紹另一個新的 CSS 屬性，它允許你通過簡單的幾行代碼來為任意元素添加很酷的變換效果。

　　CSS 變換剛剛在 CSS 3 中被引入，但是已經被添加為 webkit 的擴展了。也就是說，現在它們只能用於基於 webkit 內核的瀏覽器，包括 Apple Safari 和 Google Chrome。不過從 Opera 10.5 pre-Alpha 版本來看，Opera 將在下一個 10.5 中支持 CSS 3 變換。所以要看到本文中提到的實際效果，強烈建議你使用 Chrome 或者 Safari 4 來查看本文。

CSS 變換從哪裡來？

　　變換曾經只是 Webkit 的一部分，而且是 Safari UI 能做而其它瀏覽器不能實現的一些很酷的東東的基礎。

　　但是 W3C CSS 工作組曾經拒絕將變換添加到它的官方特性裡面，一些成員堅持認為變換並非 CSS 屬性而通過腳本來處理會更好。 (內牛滿面啊，我前一段也有類似的觀點，也和高溫討論過，我認為 CSS 動畫超出了表現的範圍，交互的東西應該有腳本來實現，不過後來在鬼哥的點撥下，才開始有了新的認識——神飛)

　　但是很多設計師和開發人員，包括我自己，堅持認為這確實是樣式——只是動態樣式，而不是我們日常使用的傳統的靜態樣式。

　　幸運的是，關於動態樣式的爭論已經成為過去。去年三月份，來自 Apple 和 Mozilla 的代表們開始將CSS變換模塊添加到 CSS 3 特性裡面，非常接近 Apple 已經添加到 webkit 中的表現。

關於設計增強的一個簡要介紹

　　在我們繼續之前，讓我強調一點：永遠不要讓網站的功能依賴樣式，如果該樣式不是瀏覽器通用的話(也就是說，所有的常用瀏覽器都支持)。

　　對錯過的同學再一次強調：永遠不要讓網站的功能依賴樣式，如果該樣式不是瀏覽器通用的話。

　　這也就是說，你可以使用樣式，比如變換，作為設計增強以提高用戶體驗——在不犧牲看不到它們的用戶的可用性的前提下。如果你不用 CSS 變換照樣能用而且用戶依然能夠完成他們的任務，就沒問題，你就可以使用 CSS 變換。

首先，一些變換的想法

　　CSS 變換將不會替代所有的 DHTML，不過它會提供一些支持過渡的方法來提高您在瀏覽器中的設計。

　　你需要到下載 Apple Safari 3+ 或 Google Chrome 瀏覽器來查看這些變換效果。這兩個瀏覽器都支持 Mac 和 PC 系統。

滾動效果

　　變換最常見的用法就是當用戶的鼠標懸放到元素上的時候將元素高亮(無論是鏈接、表格、表單還是其它的什麼元素)，變換是為頁面添加平滑的界面的非常棒的方法。

例一

Link

下拉菜單

　　純CSS菜單比較容易實現，而變換還可以讓你給菜單添加下拉和高亮效果。

例二

動畫

　　你可以在頁面上的兩點之間移動一個對象，然後使用變換給它添加動畫效果。

例三

點擊一下，不要放開!

變換、狀態與動作

　　但是請稍等一下。在深入了解變換之前，我們需要理解一個元素能變換的不同的狀態。

　　狀態定義當前頁面中相應的元素如何與用戶進行交互，它們在CSS中通過偽類來定義，比如當用戶的鼠標經過一個元素的時候，那個元素就會被 hover 偽類控制。

動態偽類	起作用的元素	描述
:link	只有鏈接	未訪問的鏈接
:visited	只有鏈接	訪問過的鏈接
:hover	所有元素	鼠標經過元素
:active	所有元素	鼠標點擊元素
:focus	所有可被選中的元素	元素被選中
None	所有元素	所有元素的默認狀態

　　變換通過改變不同元素狀態之間的一個時間段內的樣式來起作用。比如，一個元素的默認狀態的顏色值將會在呈現 hover 狀態的色彩值之前逐漸顯示色盤中的中間顏色。

一個簡單的變換

　　讓我們假設一個簡單的變換，在用戶的鼠標經過一個鏈接的時候，將顏色從一個變換成另外一個。與其它 CSS 屬性一樣，變換也是直接添加到要使用它的選擇器中。該屬性可以採用下面的 4 個值。

CSS property

　　被變換的屬性(比如, color)。看一下下面的表格了解所有可以被變換的CSS屬性列表。

Duration

　　變換持續的時間，通常以秒來計算(比如, .25s).

Timing function

　　允許你控制持續的時間的計算方式。與其使用一個簡單的線性計算，你可以使變換加速(漸入)或者減速(淡出)，或者甚至 specify a beat or count (比如，linear). More on this later in the article.

Delay

　　在動作和變換開始之間等待多久，通常用秒來表示(比如, .1s)。如果你不想延遲，該值可省略。

　　因為變換屬性始於Webkit擴展，我們不得不同時使用transition 和-webkit-transition 屬性以向後兼容。

　　讓我們首先提阿賈這這些屬性到 :hover 偽類中:

a:hover {
   color: red;
   -webkit-transition: color .25s linear;
   transition: color .25s linear;
}

　　那麼現在，當鼠標經過一個鏈接，不會直接從藍色跳轉到紅色，而是用四分之一秒的時間逐漸變換它們的中間顏色(過渡顏色)。

　　當然，我們也希望變換回到默認的鏈接顏色，那麼我們可以添加一個變換到 :link (以及 :visited)偽類上，並在它褪去之前添加一個簡單的延遲(十分之一秒) :

a:link, a:visited {
   color: blue;
   -webkit-transition: color .25s linear .1s;
   transition: color .25s linear .1s;
}

添加多重變換

　　因為一個變換就是一個 CSS 屬性，如果你在同一個 CSS 規則中添加多個變換的實例，那麼最後的那個將會覆蓋前面的，而不是添加它們。所以在下面的規則中，唯一的變換將是背景色彩：

a:hover {
  color: red;
  background-color: rgb(235,235,185);
  -webkit-transition: color .25s linear;
  transition: color .25s linear;
  -webkit-transition: background-color .15s linear .1;
  transition: background-color .15s linear .1;
}

　　當然，這並不是說，不能添加多重變換——多重變換可以在同一個變換屬性定義中用逗號隔開：

a:hover {
  color: red;
  background-color: rgb(235,235,185);
   -webkit-transition: color .25s linear, background-color .15s linear .1s;
  transition: color .25s linear, background-color .15s linear .1s;
 }

　　這條定義將產生色彩和背景色的雙重變換。

什麼可以被變換？

　　幾乎所有的有色彩、大小或位置等組件的 CSS 屬性，包括許多新添加的CSS 3屬性，都可以應用變換。一個值得注意的例外是 box-shadow。

　　來自 W3C 的變換的說明，這裡是一個可以賦予變換的 CSS 屬性的列表，附帶轉變的對象，我也高亮了一些比較有用的屬性。

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	數字
grid-*	數量
height	百分比，長度
left	百分比，長度
letter-spacing	長度
line-height	百分比，長度，數字
margin-bottom	長度
margin-left	長度
margin-right	長度
margin-top	長度
max-height	百分比，長度
max-width	百分比，長度
min-height	百分比，長度
min-width	百分比，長度
opacity	數字
outline-color	色彩
outline-offset	整數
outline-width	長度
padding-bottom	長度
padding-left	長度
padding-right	長度
padding-top	長度
right	百分比，長度
text-indent	百分比，長度
text-shadow	陰影
top	百分比，長度
vertical-align	百分比，長度，關鍵詞
visibility	可見性
width	百分比，長度
word-spacing	百分比，長度
z-index	正整數
zoom	數字

變換計時與延遲

　　使用變換，你可以改變變換的速率，在開始的時候較慢然後在結束的時候加速，反之亦然，或者之間的任何事情。 CSS 變換有 5 個計時的關鍵詞，同時也允許你自己定義你自己的計時曲線。

名稱	如何工作
cubic-bezier(x1, y1, x2, y2)	X 和 Y 值在 0 到 1 之間，以定義用於 Time function 的貝塞爾曲線的形狀。
linear	均速
ease	逐漸慢下來
ease-in	加速(漸入)
ease-out	減速(淡出)
ease-in-out	加速然後減速

全部變換？

　　變換將很快成為所有網站的標準操作方式，從而增強用戶界面的體驗。

　　為了給你的整個網站添加一個普遍的變換，一個做法就是添加一個變換到全體選擇器，類似 CSS reset。下面的代碼會給頁面中的所有元素添加一個默認的變換，從而允許你保持一個統一的變換效果：

*:link, *:visited, *:hover, *:active, *:focus {
-webkit-transition:
	color .25s linear,
	background-color .25s linear,
	border-color .25s linear;
transition:
	color .25s linear,
	background-color .25s linear,
	border-color .25s linear;
}

　　一個反對全部變換，同時明確反對使用全體選擇器作為 CSS reset 的爭論是，將一個樣式用到頁面的所有元素會減緩頁面的渲染。然而，我並沒有發現任何有關與此的證據。有人知道嗎？

　　OK，其實 CSS 變換就這麼簡單，它並不難理解，而且你也不用些大量的 JS 腳本來實現它，這很方便實用，多做幾次練習，你就可以熟練的使用它了。

譯註：本文原文題目為 CSS transitions 101，101 這個數字比較不好理解，其實美國大學第一門課程通常編號為 101，所以 101 一般表示入門、初級的意思。另外關於 transition 這個詞的翻譯，我之前是翻譯成“轉換”，但是這個翻譯很彆扭，在 twitter 上和 @gaowhen、@ghostzhang、@ivane、@hiwanz、@cnjoel 等人討論後，覺得翻譯成“變換”更合適一些，多謝各位。 —— 神飛

睡蓮‧池水間 :: 文章