过渡属性看似简单，但实际上它有很多需要注意的细节和容易混淆的地方。本文记录一下自己的看法和一些收集来的资料。

　　那就直接开始了~~~

　　早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。

　　简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。

　　在CSS中创建简单的过渡效果可以从以下几个步骤来实现：

　　　　一、在默认样式中声明元素的初始状态样式；

　　　　二、声明过渡元素最终状态样式，比如悬浮状态；

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

　　CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性：

• • 　　transition-property:指定过渡或动态模拟的CSS属性（默认值为all）

  • 　　transition-duration:指定完成过渡所需的时间（默认值为0s）

  • 　　transition-timing-function:指定过渡函数（默认值为ease函数）

  • 　　transition-delay:指定开始出现的延迟时间（默认值为0s）

[注意]IE9-不支持该属性，safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀；而其余高版本浏览器支持标准写法

深入理解CSS过渡transition