屬性何其多，精通一個受益終身（在不被新時代廢除的情況下）。今兒我們就來探討一下css3的transition這個變換過渡的屬性。
都知道通過過渡transition，可以讓web前端開發人員不需要javascript就可以實現簡單的動畫互動效果。過渡屬性看似簡單，但實際上它有很多需要注意的細節和容易混淆的地方，考的就是細節

好，接下來看定義：他是一個複合屬性，包括transition-property、transition-duration、transition-timing- function、transition-delay這四個子屬性
transition-property: 過渡屬性(預設值為all)
transition-duration: 過渡持續時間(預設值為0s)
transiton-timing-function: 過渡函式(預設值為ease函式)
transition-delay: 過渡延遲時間(預設值為0s)
我們先用一個簡單的列子來說明一下：

呈上效果：

好吧醜了點，完美展示了從小清新到突然變到了重口味，但這不影響我們來講解。

好，其實前倆理解起來不難，我也有註釋在上面，我相信機智的你不會看不懂，要是看不懂就是你的問題了，千萬別找我，那是是你傻
主要來說說後仨，第一個transition-property過渡屬性，我們說all表示全部，那如果單獨呢，比如上面這例子裡有一個背景和寬度的屬性對不對，假設，我是transition-property：width。那效果上就是我的過渡只給了width，也就是寬度上會慢慢邊長，而背景呢會一下子變成藍色

看，是不是沒有了漸變的一個效果，這就是transition-property屬性上的限制
好，第二個transition-delay過渡延遲的時間，有的孩子理解能力不太好的，可能就不太懂他代表的是什麼意思，那我來一個對比，一看就能明白了
transition-property：0s和transition-property：3s
前者就是上面的效果圖，沒動；而後者呢，請看：

看出區別了沒有，不要以為是電腦壞了，當我滑鼠移上需要過3秒才寬度才會有變化，變成變短都需要等3秒，這就是transition-property過渡延遲時間的限制。
好，下面說第三個，也是比較搞的一個transition-timing-function過渡函式
要知道css3做的最多的就是動畫效果，那既然是動畫，那麼就有動畫的執行速率，不同的速度會產生不同的結果，transition-timing-function他要的就是這個，以下是可取值。
ease: 開始和結束慢，中間快。相當於cubic-bezier(0.25,0.1,0.25,1)
linear: 勻速。相當於cubic-bezier(0,0,1,1)
ease-in: 開始慢。相當於cubic-bezier(0.42,0,1,1)
ease-out: 結束慢。相當於cubic-bezier(0,0,0.58,1)
ease-in-out: 和ease類似，但比ease幅度大。相當於cubic-bezier(0.42,0,0.58,1)
step-start: 直接位於結束處。相當於steps(1,start)
step-end: 位於開始處經過時間間隔後結束。相當於steps(1,end)
那有人就要說了cubic-bezier是什麼，step又是個啥，別急
cubic-bezier其實就是高等數學裡的貝塞爾曲線

你懂嗎? 好吧其實我也不懂,其實就是一個快慢選擇嘛我是這麼認為的，因為圖都有左右兩端，左快右慢，右快左慢，也就是去搞一下他的速度值嘛，來給你們個福利網址：http://cubic-bezier.com/#.17,.67,.83,.67去裡面測一下就好了，想要啥速度給你啥速度。反正平常只要記住ease是開始和結束慢，中間快；linear是勻速；ease-in是開始慢；ease-out結束慢；ease-in-out:相比ease幅度大就好了。管他什麼貝薩不貝薩的
好，還有一個step，這個的話我查了一下，好像介紹不多，就算有也不大明白，那我就自己來總結一下好了，器是step顧名思義就是走路、臺階的意思嘛，那知道臺階是一層一層的，走路也是一步一步的，所以他的效果呢也就是一頓一頓的那種

我寫的是transition-timing-function:steps(3,start); 裡面的數值呢steps(1,end)第一個值指定間隔個數（只能是正整數），第二個引數可選，預設end，表示開始值保持一次，也就是從頭開始，先定一次再開始；start表示直接開始
那start和end的區別呢，上面也說了，再附一張end的

發現沒有，他會現在第一的位置停頓一下，返回來的時候也一樣
此致敬transition屬性禮，哈哈 ，想深究還是挺搞的對不對。老話,歡迎感興趣的童鞋加入142991222大家庭，我們一起來探討。