【轉】CSS transitions#CSS3變換入門

　　儘管人們指望在屏幕上有些改變，可是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系統。
滾動效果 　　變換最多見的用法就是當用戶的鼠標懸放到元素上的時候將元素高亮(不管是連接、表格、表單仍是其它的什麼元素)，變換是爲頁面添加平滑的界面的很是棒的方法。
下拉菜單 　　純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 僞類中:

1
2
3
4
5

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

　　那麼如今，當鼠標通過一個連接，不會直接從藍色跳轉到紅色，而是用四分之一秒的時間逐漸變換它們的中間顏色(過渡顏色)。
 
　　固然，咱們也但願變換回到默認的連接顏色，那麼咱們能夠添加一個變換到:link (以及:visited)僞類上，並在它褪去以前添加一個簡單的延遲(十分之一秒) :

1
2
3
4
5

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

添加多重變換 　　由於一個變換就是一個CSS屬性，若是你在同一個CSS規則中添加多個變換的實例，那麼最後的那個將會覆蓋前面的，而不是添加它們。因此在下面的規則中，惟一的變換將是背景色彩：

1
2
3
4
5
6
7
8

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

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

1
2
3
4
5
6

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。下面的代碼會給頁面中的全部元素添加一個默認的變換，從而容許你保持一個統一的變換效果：

1
2
3
4
5
6
7
8
9
10

*: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等人討論後，以爲翻譯成「變換」更合適一些，多謝各位。轉自：http://www.qianduan.net/css-t...
轉載於猿2048:➬《【轉】CSS transitions#CSS3變換入門》