CSS3过渡

通过：hover、：focus、：active、：checked或者JavaScript触发一个元素，并改变样式时，可以使用transition属性，让外观的变化显得更加细腻，而不是瞬间从一个外观变成另一个外观。

一、使用CSS创建简单过渡的步骤：

1）在默认样式中声明元素的初始状态样式。

2）声明过渡元素最终状态样式

，比如悬浮状态。

3）在默认样式中通过添加过渡函数，添加一些不同的样式。

二、浏览器的兼容性问题，为了最大限度的兼容各个浏览器，在使用此属性的时候，要加上各个浏览器的前缀，可以这样使用;

<span style="white-space:pre">	</span>transition: all 1s ease-in-out;
-ms-transition:all 1s ease-in-out
-moz-transition: all 1s ease-in-out; /* Firefox 4 */
-webkit-transition: all 1s ease-in-out; /* Safari 和 Chrome */
-o-transition: all 1s ease-in-out; /* Opera */

三、transition属性值（前三个属性值较常用）：

1、transition-property：指定需要过渡的CSS属性，取值

1）为none时，没有指定任何样式。

2）all为默认值，表示指定所有样式。

3）指定一个属性值。

注：只有属性具有一个中点值的属性才具有过渡效果。

2、transition-duration：指定过渡的持续时间：

指定一个时间，单位为s（秒）或ms（毫秒）

3、ransition-timing-function：指定过渡函数

可以使用linear、ease等函数

4、transition-delay：指定过渡开始出现的延迟时间，值为一个带s或ms的时间值，如果不指定，则默认为零，

注意：四个值使用时用空格隔开。如上述的那个兼容性例子所示，可以同时指定多个属性，不同组之间用逗号隔开，例如：

transition：width 1s linear 2s，height 2s liner 2s

四、触发过渡的条件：
1、伪元素（：hove等）触发。

2、媒体查询触发。

3、JavaScript触发。

一般性建议：事件通常应用通过JavaScript触发，简单的动画或过渡则使用css触发