CSS Transition （CSS過渡效果）入門

文章目錄

• CSS過渡效果的由來
• 漸進增強設計的簡介
• 首先介紹一些過渡的概念
• 一個簡單的過渡例子
• 增加多重過渡
• 哪些屬性可以產生過渡？
• 過渡計時和延遲
• 全域過渡？

儘管人們期待螢幕顯示技術有所改進，但CSS和HTML卻只提供了少數的互動設計控制，而且還只是雙向狀態的而非漸進狀態，如：一個連結只能是一種顏色或另一種顏色，文本域只能是一種尺寸或另一種尺寸，一幅照片要麼透明要麼不透明。沒有從兩種狀態的之間的部分，即沒有過渡。

這種不優雅的轉場效果使很多頁面讓人感覺突兀。雖然我們可以用DHTML和jQuery來實現過渡效果，但這需要很多代碼來實現原本很簡單的事情。

在這篇文章中，我們用一種簡潔的方法來給頁面增加過渡效果，你將會發現CSS ransitions的一些有用的資訊以及如何使用它們。

幾個月前，我曾冒失地建議設計師們應該使用CSS3新技術來實現他們期待很久的一些基本樣式，但問題是這些技術在IE中（包括IE8）都無法實現。一些讀者認為建議使用那四分之三的人無法看到的新技術是輕率的。

對於這些讀者，我會說：先不要急於決定，因為我將會向你們介紹CSS中另一個屬性，它可以用僅僅幾行代碼為任何元素添加過渡效果。

CSS3正在引入CSS transition技術，但已經作為一個擴充，CSS transition已被添加進了Webkit。這意味著這項技術目前只能在基於Webkit引擎的瀏覽器上使用，如Apple Safari和Google Chrome。

CSS過渡效果的由來

過渡作為Webkit的一部分已經有一段時間了，基於此，Safari UI實現了其他瀏覽器無法實現的很多酷炫的效果。但W3C CSS Workgroup拒絕將其加入官方標準，一些成員認為過渡效果並非樣式屬性，而且已經可以用指令碼實現。

但很多設計者和開發人員，包括我在內，認為過渡效果實際上是一種動態樣式屬性，而非傳統上我們很多人使用的靜態樣式。

幸運的是，爭論已經過去，去年三月份來自Apple和Mozilla的代表們開始將CSS Transition Module 加入CSS Level 3 specification，和Apple加入Webkit的那部分非常接近。

漸進增強設計的簡介

在進行下面的內容之前，讓我們先強調一點：如果樣式在瀏覽器上不具有互通性，永遠不要把網站功能依賴於樣式。

這就是說，你可以用樣式如過渡效果和增強設計來改進使用者體驗，而不犧牲那些無法看到它們的使用者的可用性。只要能讓使用者離開了那些過渡效果仍然可以完成他們的任務就好。

首先介紹一些過渡的概念

CSS過渡不會替代DHTML，但可以在支援過渡效果的瀏覽器中增強你的設計，並且不用擔心破壞其他使用者的瀏覽體驗。

你需要在Apple Safari 3+ 或者 Google Chrome中看到過渡效果，這兩個瀏覽器都可以在Mac和PC上使用。

反轉

過渡效果最明顯的表現就是當使用者把滑鼠移至上方在某個元素上時高亮它們，如連結、表格、表單域、按鈕等。過渡可以給頁面增加一種非常平滑的外觀。

Example #1

HTML

<div class="example">  <p><a href="#">Link</a></p> </div>

CSS

#example1 p { text-align: left; }#example1 a:link { font-size: 3em; color: blue; background-color: rgb(255,255,255); -webkit-transition: color .5s linear, background-color .5s linear;  transition: color .5s linear, background-color .5s linear;  }#example1 a:hover { color: red; background-color: rgb(255,204,255); -webkit-transition: color .5s linear, background-color .5s linear;  transition: color .5s linear, background-color .5s linear;  }#example1 a:active { color: green; -webkit-transition: color .5s linear;  transition: color .5s linear; }

下拉式功能表

CSS過渡使純CSS來實現下拉式功能表變得非常容易。

Example #2

HTML

<div class="example">  <ul class="menu">   <li>About Us</li>    <ul class="drop">     <li><a href="#">Our Team</a></li>     <li><a href="#">News</a></li>     <li><a href="#">Reviews</a></li>     <li><a href="#">Contact</a></li>    </ul>  </ul> </div>

CSS

#example2 { height:200px; }#example2 a:link { color: blue; text-decoration: none; -webkit-transition: color .25s ease-in 0s; transition: color .25s ease-out 0s; }#example2 a:hover { color: red; -webkit-transition: color .25s ease-in .1s; transition: color .25s ease-out .1s; }#example2 a:active { color: green; transition: color .25s ease; }#example2 ul { list-style: none; margin: 0; padding: 0;}#example2 .menu { display: block; position: relative; top: .9em; left: 0; padding: 10px; height: auto; width: 100px; border: 8px solid rgba(204,204,204,.5); cursor: pointer; background-color: rgba(255,255,255,.75); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}#example2 ul.menu  li { font-weight: normal; list-style: none;}#example2 ul.menu  li a:link { font-weight: normal; list-style: none; font-size: 12px; margin-left: 0; padding-left: 0;}#example2 ul.menu ul li { font-weight: normal; padding: 5px 0; margin:0; border-top: 1px solid rgb(204,204,204); background-color: rgb(255,255,255); -webkit-transition: background-color .5s ease;  transition: background-color .2s ease; }#example2 .drop { display: block; position: relative; height: 0; overflow: hidden; width: 100px; opacity: 0; -webkit-transition: opacity .25s linear 0s, height .25s ease-out .1s; transition: opacity .25s linear 0s, height .25s ease-out .1s;  }#example2 ul.menu ul li:hover { background-color: rgb(234,234,234); -webkit-transition: background-color .5s ease;  transition: background-color .2s ease; } #example2 ul.menu:hover>.drop { height: 140px; opacity: 1; -webkit-transition: opacity .25s linear 0s,  height .25s linear 0s; transition: opacity .25s linear 0s,  height .25s linear 0s; }

動畫

你可以使用CSS過渡來讓一個對象在兩點之間移動。

Example #3

HTML

<div class="example">  <div class="move">   <p><strong>Example #3</strong></p>   <p class="control" style="color:#FFFFFF;">Click & Hold!</p>   <div id="astro"><img src="http://netdna.webdesignerdepot.com/uploads/css101/astro-127531.png"></div>  </div> </div>

CSS

#example3 { background-color: black; color: white;}  #example3 .control { text-align: center; font-size: 3em;}  #example3 .move { cursor: pointer;}  #example3 .move>#astro { position: relative; top: 0; left: 250px; -webkit-transition: top 2s ease-in-out, left 2s ease; transition: top 2s  ease-in-out, left 2s ease;}  #example3 .move:active>#astro { top: 10px; left: 10px; -webkit-transition: top 2s ease-in-out, left 2s ease; transition: top 2s  ease-in-out, left 2s ease;}

過渡，狀態和動作

我們在此稍作停留，在深入瞭解過渡之前，我們必須理解一個元素產生過渡效果的各種狀態。

狀態定義了一個特定元素在當前如何與使用者進行互動，它們在CSS中用偽類來標註。例如：當使用者把滑鼠移至上方在某一元素上時，那個元素將應用用偽類hover的樣式。

動態偽類	受影響的元素	描述
:link	僅連結	未訪問連結
:visited	僅連結	已訪問連結
:hover	所有元素	滑鼠可懸停元素
:active	所有元素	滑鼠可點擊元素
:focus	所有可被選中元素	選中的元素
None	所有元素	所有元素預設狀態

過渡將會在漸漸地在兩種不同的狀態間變換。例如：某個元素的原始顏色值將會經過中間調緩慢地變化到懸停顏色值。

一個簡單的過渡例子

讓我們考慮為一個連結增加懸停顏色過渡效果。像其他CSS屬性一樣，transition屬性直接應用在CSS選取器上，這個屬性有以下4個值：

CSS property

CSS屬性 表示要產生變化的屬性（如：顏色）。下面的列表列出了可以產生過渡的屬性。

Duration

持續 表示過渡持續的時間，以秒為單位（如：.25s）

Timing function

計時功能 控制Duration如何計時。你可以讓效果加速或減慢甚至為其指定一個節拍或計時器，而不是僅僅使用一個數字來計時。

Delay

延遲 表示動作觸發後多長時間開始產生過渡效果，通常用秒錶示。如果不需要延遲的話，此值可以忽略。

因為過渡屬性是Webkit的擴充，所以我們必須把transition 和 -webkit-transition兩種屬性都包含進來以向後相容：

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

現在，當懸停在一個連結上時，其顏色將會在0.25秒內從預設顏色經中間色變化到最終色。

當然，我們還要讓它變回預設顏色。我們給偽類:link（如果可能的話也給:visited）在淡出之前增加一個非常簡短的過渡（0.1秒）：

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

增加多重過渡

因為過渡是CSS的一個屬性，如果添加多個transition屬性執行個體，最後添加的那個將覆蓋之前的執行個體。所以在下面的規則中僅有背景顏色產生過渡效果：

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

要實現多重過渡，可以在同一transition屬性中將各個要變換的屬性用逗號隔開：

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屬性都可以產生過渡效果，包括很多CSS3的屬性。一個值得注意的例外是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	Rectangle
font-size	長度, 百分比
font-weight	數字
grid-*	Various
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之間
linear	勻速
ease	漸慢
ease-in	加速
ease-out	變慢
ease-in-out	加速然後變慢

全域過渡？

過渡將會很快成為所有網站增強使用者介面反饋的標準操作步驟。要給整個網站增加無處不在的過渡效果，一個選擇就是使用全域選取器。通過為所有元素應用預設過渡屬性，你可以實現統一的過渡效果。

*: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;}

這裡有一個爭議，認為給頁面上所有元素應用過渡屬性將會減慢使瀏覽器的解析速度。但我還沒有發現任何證明此觀點的證據，有人知道嗎？

Jason Cranford Teague寫過13餘本數位媒體的書，包括：Speaking In Styles: The Fundamentals of CSS for Web Designers.要瞭解更多關於CSS和web列印的資訊，請參考Jason的新書：Fluid Web Typography.可以在Twitter上follow Jason：@jasonspeaking。

原文地址：http://www.webdesignerdepot.com/2010/01/css-transitions-101/

本文來源：http://hi.baidu.com/thinkmad/blog/item/deb0c0fdde4b064ed6887db5.html