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。