1.transition的瀏覽器支持情況 IE10+支持，IE6\7\8\9都不支持！目前，其他瀏覽器最新版本都支持，不需要再加首碼 -webkit- 之類的了 2. 還是一步一步說說怎麼用transition吧頁面只有一個div，其css如下：滑鼠移動到div上，div立刻變寬為300px，效 ...

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;

效果如下：

未完待續

CSS3動畫效果transition

1.transition的瀏覽器支持情況

2. 還是一步一步說說怎麼用transition吧

3.transition寫在哪？

4.怎麼觸發transition動畫？

5.transition都有哪些參數？預設是什麼？可以怎麼寫？

6.transition多樣式怎麼寫？