前言

W3C標準中對css3的transition這是樣描述的：“css的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，并圓滑地以動畫效果改變CSS的屬性值。”

過渡transition

先來看一個小例子

這樣當我的光標懸浮在demo的一瞬間

它的寬度變成了200px

有沒有辦法讓我們光標懸浮在元素時，元素寬度緩慢變寬呢

在CSS3之前我們只能使用麻煩的js腳本

但是現在我們只需要添加一個屬性

就可以達到我們的目的

transition它的作用就是指定當你的元素某些樣式發生變化時

這些樣式可以漸漸過渡到最終屬性值

它是一個復合屬性

有以下子屬性

      transition-property：指定過渡或動態模擬的css屬性

      transition-duration：指定過渡所需要的時間

      transition-timing-function：指定過渡函數

      transition-delay：指定開始出現的延遲時間

transition-property 我們想要哪種屬性過渡就寫哪種屬性

或者干脆寫過渡所有屬性的關鍵字all

transition-duration漸變時間屬性值就是“數字+s”

代表幾秒鐘內過渡

transition-timing-function 是可選的屬性值，有如下可選值

      linear 

      線性過渡，等價貝塞爾曲線(0.0, 0.0, 1.0, 1.0)

      ease（默認）

      平滑過渡，等價貝塞爾曲線(0.25, 0.1, 0.25, 1.0)

      ease-in

      由慢到快，等價貝塞爾曲線(0.42, 0, 1.0, 1.0)

      ease-out

      由快到慢，等價貝塞爾曲線(0, 0, 0.58, 1.0)

      ease-in-out

      由慢到快再到慢，等價貝塞爾曲線(0.42, 0, 0.58, 1.0)