CSS3-transition

transition: <property> <duration> <animation type> <delay>以下圖所示：

相對應的一個示例代碼：

p { -webkit-transition: all .5s ease-in-out 1s; -o-transition: all .5s ease-in-out 1s; -moz-transition: all .5s ease-in-out 1s; transition: all .5s ease-in-out 1s; } 

 瀏覽器的兼容性:

由於transition最先是有由webkit內核瀏覽器提出來的，mozilla和opera都是最近版本才支持這個屬性，而咱們的大衆型瀏覽器IE全家都是不支持，另外因爲各大現代瀏覽器Firefox,Safari,Chrome,Opera都還不支持W3C的標準寫法，因此在應用transition時咱們有必要加上各自的前綴，最好在放上咱們W3C的標準寫法，這樣標準的會覆蓋前面的寫法，只要瀏覽器支持咱們的transition屬性，那麼這種效果就會自動加上去：

   //Mozilla內核
   -moz-transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> 
　　　　　　　　　　　　[, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* 
   //Webkit內核
   -webkit-transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>
 　　　　　　　　　　　　　　[, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* 
   //Opera
   -o-transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> 
　　　　　　　　　　　　[, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* 
   //W3C 標準
   transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>
　　　　　　　　　　 [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* 

　　有時咱們不僅改變一個css效果的屬性,而是想改變兩個或者多個css屬性的transition效果，那麼咱們只要把幾個transition的聲明串在一塊兒，用逗號（「，」）隔開，而後各自能夠有各自不一樣的延續時間和其時間的速率變換方式。但須要值得注意的一點：transition-delay與transition-duration的值都是時間，因此要區分它們在連寫中的位置，通常瀏覽器會根據前後順序決定，第一個能夠解析爲時間的怭值爲transition-duration第二個爲transition-delay。