transition属性主要是用来对某个css属性的变化过程进行控制，官方的介绍是”css
transitions allow property changes in css values to occur smoothly over a
specified duration.“。而我个人则简单地理解为”在某个时间段内，平滑地改变某个css属性。“。
transition又包含了四个子属性，分别为property、duration、timing-function、delay。下面来一一介绍，在最后会给出一个简单的实例和使用方法说明。
property针对了当前的某个css属性进行设置。比如我要一个背景色时，则设置property值为background。
duration针对了过渡效果的持续时间。
timing-function算是transition属性中最为复杂的一个了。它针对了过渡效果的，有多种特效展示。这里得涉及到一个学术性的话题：貝茲曲線。说实话，我也没搞的太明白，但w3c给出了一张曲线图，一看就明白了（后附图）。
介绍下预留的几个特效：
ee: cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear:
cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0,
1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out:
cubic-bezier(0.42, 0, 0.58, 1.0)
cubic-bezier(x1, y1, x2, y2)
为自定义，x1,x2,y1,y2的值范围在[0, 1]
其中的cubic-bezier即为貝茲曲線中的绘制方法。先来看图：
图上有四点，p0-3，其中p0、p3是默认的点，对应了[0,0],
[1,1]。而剩下的p1、p2两点则是我们通过cubic-bezier()自定义的。
参考阅读：
w3c: ://www.w3.org/tr/-transitions/#transition-timing-function_tag
貝茲曲線：http://zh.wikedia.org/wiki/%e8%b2%9d%e8%8c%b2%e6%9b%b2%e7%b7%9a
duration针对了过渡效果的延迟执行时间。
1).
过渡单个属性：
transition-property:opacity;
transition-duration:2s;
transition-timing-function:ease-in;
transition-delay:0;
2). 过渡多个属性：
[1]. 上下一一对应型：
transition-property:opacity
left;
transition-duration:2s,
4s;
此时：opacity过渡时间为2s，left过渡时间为4s。
[2]. 循环对应型：
transition-property:opacity left width
height;
此时：opacity和width过渡时间为2s，left和height过渡时间为4s。
3). transition简写模式：
顺序为：transition-property transition-duration
transition-timing-function
transition-delay
/*单个属性：*/
-moz-transition:background
0.5s ease-out 0s;
/*多个属性：*/
-moz-transition:background, 0.5s ease-out 0s,
color 0.4 ease-out 0s;
代码：
<a
href="http://www.ihiro.org/" tar="_blank">ihiro.org</a>
css代码：
<a href="http://www.ihiro.org/"
target="_blank">ihiro.org</a>
a { display:block; width:160px;
height:30px; line-height:30px; text-align:center; padding:10px;
background:#33589f; color:#fff; text-decoration:none;
text-transform:uppercase;
/*只有当鼠标移出后才处理*/
-moz-transition:background 0.2s linear
0s;
}
a:hover { background:#263c7b;
color:#f60;
text-shadow:2px 2px 10px
#f00;
/*
只有当鼠标移入时才处理
注：若a:hover中不写transition,则会继承a中的transition */
/*
1. 单个属性
-moz-transition:background 0.5s ease-out 0s;
2.
多个属性：
-moz-transition:background, 0.5s
ease-out 0s, color 0.4 ease-out 0s;
*/
-moz-transition:background 0.5s ease-out, color 0.4s
ease-out, text-shadow 0.3s linear;
}