1.transition的瀏覽器支持情況
IE10+支持，IE6\7\8\9都不支持！目前，其他瀏覽器最新版本都支持，不需要再加前綴 -webkit- 之類的了
2. 還是一步一步說說怎么用transition吧
頁面只有一個div，其css如下：
1 <style type="text/css"> 2 div { 3 width:100px; 4 height:30px; 5 background-color:#FF9900; 6 } 7 div:hover { 8 width: 300px; 9 } 10 </style>
鼠標移動到div上，div立刻變寬為300px，效果如下：
現在在div身上加上 transition:0.5s;
1 <style type="text/css"> 2 div { 3 width:100px; 4 height:30px; 5 background-color:#FF9900; 6 /* 加上這個，讓變化慢一點 */ 7 transition: 0.5s; 8 } 9 div:hover { 10 width: 300px; 11 } 12 </style>
效果如下：
原來是瞬間，現在div的css樣式中加入了transition屬性，變成了緩慢的動畫了。那么問題來了，如下：
3.transition寫在哪？
繼續上面的案例，我們寫在div上，就是告訴div，以后變化將會有過渡，為什么不是加在div:hover中？
將div里的transition:0.5s刪掉，放在div:hover中，（css代碼略）效果如下
鼠標放在上面，效果還好，慢慢伸長，鼠標一松，立刻變短，沒有過渡效果。為什么？
因為div:hover狀態時，有這個transition屬性，而div由短變長中，給個過渡，就有動畫。當鼠標離開div，不是hover狀態了，div沒有transition屬性，所以，立刻變短。
既然是變化，那就至少涉及到兩個狀態，變化前的狀態，變化后的狀態。兩個狀態不一樣，然后給予慢鏡頭過渡。就形成了動畫。
也就是說：你想讓誰的變化具有動態過渡的效果，那transition屬性就加在誰身上，還要加的讓變化前后兩個狀態，都能有transition屬性（要知道，div:hover時，也可有獲取到div中的屬性，反過來就不行了）。
在這里，變化前是div，變化后div:hover，兩個顯示出來不同。鼠標移動觸發的動畫效果。那么這就有個問題了，如下：
4.怎么觸發transition動畫？
上面知道，變化前div {...} ，變化后 div:hover {...} 。其中:hover狀態就是鼠標移動過去觸發的。這種就是通過偽類觸發。
偽類觸發 比如 :hover : focus :checked :active，有了這些偽類，就有了“狀態”，有了狀態，就有了不同，有了不同，就有了過渡動畫。
還可以通過js觸發，比如說：js控制div增加個class為donghua，那么，頁面中該div增加個class，其屬性要變，如果設置過transition，那就會有動畫效果。這么理解吧：瀏覽器發現該div變成div.donghua了，而且發現形狀大小色彩等前后不一樣了，給前后狀態變化的過程來個慢鏡頭，就形成了動畫。
1 <!-- 並不會有動畫，而是直接顯示寬度300px（如果是js操作，增加的donghua這個class就可以） --> 2 <style type="text/css"> 3 div { 4 height:30px; 5 background-color:#FF9900; 6 7 width:100px; 8 transition: 0.5s; 9 } 10 div.donghua { 11 width: 300px; 12 } 13 </style> 14 ... 15 16 <div class="donghua"> 17 18 </div>
上面的並不會有動畫效果，因為頁面顯示出來的時候，就已經有了class="donghua" ，覆蓋了原來100px的定義，直接顯示寬度為300px了。下面個例子演示js控制，導致的變化，有了變化，也就有了動畫。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 p { 8 height:30px; 9 background-color:#FF9900; 10 11 width:100px; 12 transition: 0.5s; 13 } 14 div.donghua p{ 15 width: 300px; 16 } 17 </style> 18 </head> 19 <body> 20 <div> 21 <p>看我的變化</p> 22 </div> 23 <script type="text/javascript"> 24 window.onload = function(){ 25 document.body.children[0].onclick = function(){ 26 if(this.className == 'donghua'){ 27 this.className = ''; 28 }else{ 29 this.className = 'donghua'; 30 } 31 } 32 } 33 </script> 34 <!-- 35 這個例子還想說明的是：<p>是變化的部分，transition加在p身上， 36 但是觸發變化不一定是p多個class，或者在hover狀態 ，可能因為父級多個class什么的（或其他原因），也會導致變化 37 總之，有變化，就有過渡動畫。管它是什么導致的呢！ 38 --> 39 </body> 40 </html>
效果如下：
知道動畫怎么觸發的了，下面就要講講transition的具體參數了
5.transition都有哪些參數？默認是什么？可以怎么寫？
transition是這四個屬性的復合樣式
| 屬性名 | 描述 |
|---|---|
| transition-property | 指定CSS屬性的name，transition效果（元素上的什么css屬性變化，默認是all，上面例子就是div的width變化，設置為none則無變化） |
| transition-duration | transition效果需要指定多少秒或毫秒才能完成（可以是1s、0.5s、200ms，默認0） |
| transition-timing-function | 指定transition效果的轉速曲線 （勻速呢？還是先快后慢，或是先慢后快，等等...默認ease） |
| transition-delay | 定義transition效果開始的時候（等多久開始，默認0） |
transition: property duration timing-function delay;
默認all 0 ease 0
先講講transition-property，舉例：
1 div { 2 width:100px; 3 height:30px; 4 background-color:#FF9900; 5 transition: 1s; 6 } 7 div:hover { 8 width: 300px; 9 height: 90px; 10 background-color: green; 11 }
頁面只有一個div標簽，動畫效果如下，鼠標移上去，寬高背景色都慢慢變了：
現在，把上面css第5行的transition: 1s;改為transition:width 1s; 那么就只有width是漸變，其他的都是突變，效果如下：
transition-property默認是all，這個例子就是寫的width，那就只有width漸變，也可以寫none，那就沒有漸變效果了，等於沒寫。
第二個參數就是動畫耗時 transition-duration，默認是0，所以必不可少，要不然沒有動畫效果，沒什么可說的。
第三個參數transition-timing-function的值：
- ease（默認值）逐漸變慢
- linear 勻速
- ease-in 加速
- ease-out 減速
- ease-in-out 先加速后減速
- cubic-bezier貝塞爾曲線(x1,y1,x2,y2)
http://cubic-bezier.com/ 這個網站是貝塞爾曲線數據生成工具，使用貝塞爾曲線的代碼示例如下
transition:all 1s cubic-bezier(0.27,1.01,0.95,0.22)
第四個參數是延遲時間，就是等待多久才開始執行動畫。（在做導航欄下拉菜單時，有個延遲時間，讓鼠標划過時不會立即顯示，防止誤划）上面的都沒有設置，如果設置為2s，那邊鼠標移動上去div上，div是hover狀態，但是要等2s后，動畫執行開始，如果不到2s鼠標就移開了，div就不是hover狀態了，那就不執行動畫了。
上面我們對幾個參數搞清楚了，但是有個問題就是，寬高背景要么一起開始變，要么就只有某個突然變，我要想讓寬度變化1s完成，高度變慢點2s完成，背景更慢3s完成，怎么辦？寫3次transition嗎？答曰：用逗號隔開即可。
6.transition多樣式怎么寫？
還是上面div變化的案例，代碼就不重新搬運了，只寫改動的部分。
/* 多個樣式各個樣式用逗號隔開即可 */ /* 寬度1s完成變化，高度延遲1s執行，2s完成變化，背景色3s完成變化 */ transition:width 1s, height 2s 1s, background 3s;
效果如下：
未完待續