描述：

css3 过渡就像一个润滑剂，它是元素在触发更容易平滑过渡。

在css3之前动画都是依赖于javascript和flash实现，但css3过渡需要处理的资源更少，更加平滑。在css中可以通过一些伪类来触发如：:hover、:focus、:active、:target、:checked等，无需再javascript中编写动画，只需要更改一个属性值并依赖浏览器来执行所有的工作。

下列为css创建简单的过渡步骤：

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

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

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

兼容性：

IE10+ 、Chrome 26+、FireFox 16+、Safari 7+ 、 Opera15.0+

Firefor 4.0 ~15.0、Chrome 4.0 ~ 20.0、Safari 3.1 ~ 6.0 和Opera10.5 ~ 12.0，在这些浏览器中使用transition属性需要添加各个浏览器的是有属性。

IOS Safari 3.2 ~ 6.1、Android Browser 2.1+ 、Chrome for Android 27.0 需要添加浏览器前缀 -webkit-，Opera Mobile10.0 ~ 12.0中需要添加浏览器前缀 -o-。

transiont 属性主要包含四个属性值：

1、transition-property：过渡或动画模拟的CSS属性。

2、transition-duration：完成过渡所需要的时间。

3、transition-timing-function：过渡函数。

4、transition-delay：指定过渡开始的延迟时间。

CSS支持transition过渡功能属性表：

background-color

background-position

border-bottom-color

border-bottom-width

border-left-color

border-left-width

border-right-color

border-right-width

border-top-color

border-top-width

bprder-spacing

bottom

clip

color

font-size

font-weight

height

left

letter-spacing

line-height

margin-bottom

margin-left

margin-right

margin-top

max-height

max-width

min-height

max-height

opacity

outline-color

outline-width

padding-bottom

padding-left

padding-right

padding-top

right

text-indent

text-shadow

vertical-align

visibliity

width

word-spacing

z-index

脚本演示：

transition-property: background-color;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0.0s;
-webkit-transition-property: background-color;
-webkit-transition-duration: 0.2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 0.0s;
-moz-transition-property: background-color;
-moz-transition-duration: 0.2s;
-moz-transition-timing-function: linear;
-moz-transition-delay: 0.0s;
-o-transition-property: background-color;
-o-transition-duration: 0.2s;
-o-transition-timing-function: linear;
-o-transition-delay: 0.0s;
-ms-transition-property: background-color;
-ms-transition-duration: 0.2s;
-ms-transition-timing-function: linear;
-ms-transition-delay:0.0s;