官方解释：使元素在设置的两个值之间平缓过渡。
通俗解释：用来设定滑溜地过渡效果。
 
示例视频：

div {
	width: 200px;
	height: 100px;
	transition: .6s;
	background-color: rgba(121,162,42,1.00); /* 绿色 */
}
div:hover {
	width: 300px;
	height: 200px;
	background-color: rgba(241,167,29,1.00); /* 橙色 */
}

默认尺寸为200×100，绿色的一个容器。
鼠标滑过的时候变成300×200，橙色的容器。
在默认状态下设置transition: .6s声明，使其在鼠标滑过的时候在0.6秒时间内进行平缓过渡。
道理就是这么简单。

下面进行深入讲解。
 

简写语法

transition: property duration timing-function delay|initial|inherit;

翻译一下吧：

transition: 属性 持续时间 过渡方式 延迟执行时间|不继承|继承;

刚开始的例子中只有一个.6s的一个值。指的就是过渡时间。其它值虽然没写，但都是默认值。
 

非简写语法(以上面的例子为例)

transition-property:all；
transition-duration:0.6s；
transition-timing-function:ease；
transition-delay:0s；

每个属性呢都有它详细的值可供选择。
对于初学者来说，会设置过渡时间就可以了。更多的用法，大家可以在网上自学。我就引路到这里了。
 

兼容模式

transition属性是css3的属性。就是一个较新的样式表属性。虽然已经运用好几年了。但问题是依然会有很多用户使用着比较老的电脑。系统也有可能是windows xp以及老的浏览器。
为了让这个属性兼容更老一点的浏览器。我们需要对这个属性增加特定前缀让更老一点的浏览器支持该效果。
下面的方法，不只是对transition属性，对其它的css3的属性，都适用。

-webkit-transition:0s; /* 针对老版本的谷歌浏览器（chrome浏览器），苹果浏览器（safari浏览器），以及国内的某些双核心（IE核心+webkit核心）浏览器 */
-moz-transition:0s; /* 针对老版本的火狐浏览器（firefox浏览器）*/
-o-transition:0s; /* 针对老版本的欧朋浏览器（opera浏览器）*/
-ms-transition:0s; /* 针对老版本的IE浏览器（IE9及以上）*/

但，HTML5标准当中，是不建议用这种前缀的。但为了获得更好的兼容性。写上更好。也不算是错误。
所以，对于本文的例子。最稳妥的写法就是：

div {
	width: 200px;
	height: 100px;
    -webkit-transition: .6s;
    -moz-transition: .6s;
    -o-transition: .6s;
    -ms-transition: .6s;
	transition: .6s;
	background-color: rgba(121,162,42,1.00); /* 绿色 */
}
/* 此处省略很多代码 */

需要注意的是，不带前缀的代码一定要写在最下面。为了渲染性能。
 

相关英语

transition = 过渡
property = 属性
duration = 持续时间
timing-function = 时间-函数（其实她有专门的时间函数。大家有空上网查一查），本文指过渡方式。
delay = 延迟