CSS3 過渡屬性

CSS3 過渡
多年來， Web前端開發人員一直在尋求經過HTML和CSS實現一些動畫交互效果， 而再也不使用JavaScript 或Flash。 如今他們的願望實現了。 CSS3除了給咱們帶來前面介紹的一些 特殊功能模塊以外， 還爲Web設計師添加了 一些動畫功能模塊。 能夠經過:hover、:focus、:active、:checked 或者JavaScript 觸發一個元素，這樣，外觀變化會顯得更細膩，而不會讓人感受「 一觸即發」。例如懸浮修改連接色，在 CSS2.1中鼠標懸浮時， 馬上從一個顏色變成另外一個顏色。 而在CSS3 中使用過渡功能， 鼠標懸浮時， 顏色在必定的時間內， 從一個顏色過渡到另外一個 顏色，給用戶更好、 更細膩的體驗。
CSS3的過渡功能像是一種黃油， 經過一些CSS的簡單動做觸發樣式平滑過渡。W3C標準中描述的transition功能很簡單： CSS3的transition容許CSS的屬性值在必定的時間區間內平滑地過渡。這種效果能夠在鼠標單擊、得到焦點、被點擊或對元素任何改變中觸發，並平滑地以動畫效果改變CSS的屬性值。
以往Web中的動畫都是依賴於JavaScript和Flash實現，但原生CSS過渡在客戶端上須要處理的資源少得多，從而顯得更加平滑。 CSS3過渡與元素上的常規樣式一塊兒聲明。只要目標屬性更改，瀏覽器 就會應用過渡。除了使用JavaScript 觸發動做外，在CSS中也能夠經過一些僞類來觸發， 如 :hover、:focus、:active、:target 和:checked等。 這很重要：無須在JavaScript中編寫動畫，只須要更改一個屬性值並依賴瀏覽器來執行全部重要工做。 如下 是使用CSS建立簡單過渡的步驟：
http:/ /www.iis7.com/b/wzjk/
1). 在默認樣式中聲明元素的初始狀態樣式。
2). 聲明過渡元素最終狀態樣式， 好比懸浮狀態。
3). 在默認樣式中經過添加過渡函數， 添加一些不一樣的樣式。
transition屬性是一個複合屬性，出於簡潔性和便於維護考慮，過渡語法一般以簡化的形式表達。
transition屬性主要包含四個屬性值：
·transition-property： 指定過渡或動態模擬的CSS屬性。
·transition-duration： 指定完成過渡所需的時間。
·transition-timing-function： 指定過渡函數。
·transition-delay： 指定過渡開始出現的延遲時間。
指定過渡函數 transition-timing-function，transition- timing- function屬性指定某種指代過渡「 緩動函數」的屬性。此屬性可指定瀏覽器的過渡速度， 以及過渡期間的操做進展狀況， 能夠將某個值指定爲預約義函數、階梯函數或者三次貝塞爾曲線。
到目前爲止，看到的ease、linear、ease-in、ease-out和ease-in-out等曲線函數很是通常，用於過渡動畫中也不是十分精確。而如今製做一些動畫需求愈來愈精確，須要定義一些更精確的函數。
CSS3 的transition中， 定義三次貝塞爾曲線的語法如右所示： cubic-bezier( P0, P1, P2, P3)
一個三次貝塞爾曲線由四個點控制曲線形狀。每一個點由水平和垂直兩個值來肯定， 也就是常說的由X和Y值肯定。
這些點的值是小數或者百分比， 不過不多看到使用百分比來設置一個三次貝塞爾曲線點。並且它們的值都是一個0～1的小數。 不過有一點須要特別注意， 三次貝塞爾曲線中的P0和P兩個點是沒法設置的， 由於它們老是存在HTML中， 也就是說它們總會是（ 0，0）和（ 1，1）。
注意，三次貝塞爾曲線中的每一個點值只容許0～1的值。
step()函數，step()函數用於把整個操做領域劃成一樣大小的間隔， 每一個間隔都是都是相等的。 該函數還指定發生在開始或結束的時間間隔是否另外輸出百分比（換句話說，若是輸出的百分比爲0%表示輸入變化的初始點）。
step() 函數很是獨特，它容許在固定的間隔播放動畫。例如， 在 step() 函數圖上能夠看出， 動畫屬性比在0%處開始，漲到50%，動畫結束時， 屬性值達到100%（ 也就是結束狀態屬性）。 而且在各個step() 函數中每一個步驟在過渡動畫中不夠平滑
step(< integer>[,[ start| end]]?) step() 函數主要包括兩個參數。
·第一個參數是一個數值< integer>， 主要用來指定step()函數間隔的數量， 此值必須是一個大於0的正整數。
·第二個參數是可選的， 是start或end， 若是第二個參數忽略， 則默認爲end值。 其中step( 1, start)至關於step- start； step( 1, end)至關於step- end。
僞元素觸發
使用transition 時， 經常使用鼠標懸浮（: hover） 來觸發過渡。
爲說明這與觸發過渡的實際事件毫無關聯， 也爲強調狀態變化的重要性， 下面提供了 一些觸發過渡的其餘方法。

1. 使用:active 「:active」僞類表示用戶單擊某個元素並按住鼠標按鈕時顯示的狀態。
2. 使用:focus「:focus」僞類一般會在元素接收鍵盤焦點時出現。文本輸入框元素上將發生過渡， 且該元素獲得焦點時會執行文本輸入框元素寬度和背景色過渡。
   此處做爲一個邊點， 當對「: hover」僞類應用過渡時， 最好將「: focus」添加到選擇器堆棧。 這樣將可以豐富鼠標用戶和鍵盤用戶的體驗。
3. 使用:checked 「:checked」僞類在發生如下情況時觸發過渡。 文本框選中時，
4. 媒體查詢觸發 觸發元素狀態變化的另外一種方法是使用CSS3媒體查詢（ Media Queries）。
5. JavaScript 觸發 若是能夠基於CSS的狀態更改觸發過渡， 天然能夠經過 JavaScript作到這一點。隱式過渡 「隱式過渡」指的是當一個屬性改變時引發另外一個屬性到一個屬性的過渡。