【轉】CSS transitions#CSS3變換入門

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

比如一個連結要麼是這個顔色，要麼是那個顔色；一個文本區域要麼這麼大，要麼那麼大；一張圖檔要麼是透明的要麼是不透明的；它們是從一個狀态直接變到另一個狀态——中間并沒有過渡。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　狀态定義目前頁面中相應的元素如何與使用者進行互動，它們在CSS中通過僞類來定義，比如當使用者的滑鼠經過一個元素的時候，那個元素就會被hover僞類控制。

動态僞類

起作用的元素

描述

:link

隻有連結

未通路的連結

:visited

通路過的連結

:hover

所有元素

滑鼠經過元素

:active

滑鼠點選元素

:focus

所有可被選中的元素

元素被選中

None

所有元素的預設狀态

　　變換通過改變不同元素狀态之間的一個時間段内的樣式來起作用。比如，一個元素的預設狀态的顔色值将會在呈現hover狀态的色彩值之前逐漸顯示色盤中的中間顔色。

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

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

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

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

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

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

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

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

　　當然，我們也希望變換回到預設的連結顔色，那麼我們可以添加一個變換到:link (以及:visited)僞類上，并在它褪去之前添加一個簡單的延遲(十分之一秒) :

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

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

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

　　幾乎所有的有色彩、大小或位置等元件的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。下面的代碼會給頁面中的所有元素添加一個預設的變換，進而允許你保持一個統一的變換效果：

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

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

<a target="_blank" href="http://www.cnblogs.com/lhb25/p/must-read-links-for-web-designers-and-developers-volume-12.html">Web 前端工程師和設計師必讀精華文章推薦</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/07/28/html5-awesome-single-page-sites-inspiration.html" target="_blank">酷！15個精美的 HTML5 單頁網站作品欣賞</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/11/22/best-awesome-css3-animation-demos.html">炫！35個讓人驚訝的 CSS3 動畫效果示範</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/03/02/30-mind-blowing-parallax-scrolling-effect-websites.html" target="_blank">贊！30個與衆不同的優秀視差滾動效果網站</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/01/13/25-outstanding-single-page-website-designs.html">靓å！25個優秀的國外單頁網站設計作品欣賞</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/09/awesome-html5-and-javascript-effects.html">帥！8個驚豔的 HTML5 和 JavaScript 特效</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/06/27/35-exclusive-rainbow-colored-flash-websites.html" target="_blank">頂！35個很漂亮的國外 Flash 網站作品欣賞</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/24/outstanding-admin-panels-part-one.html" target="_blank">哇！34個漂亮網站和應用程式背景管理界面</a>

<a href="http://www.yyyweb.com/go/web" target="_blank">本部落格新站點 ◆ 前端裡 ◆ 歡迎圍觀：）</a>

歡迎任何形式的轉載，但請務必注明出處。