首先介绍一下transition的属性取值：
transition-property : 主要设置对象中的参与过渡的属性，包括（border-color,background-color,color）
transition-duration : 主要设置对象过渡的持续时间
transition-timing-function : 主要设置对象过渡的动画类型
transition-delay : 主要设置对象延迟过渡的时间
理解了这几个属性，过渡就基本掌握了，一般我把它经常运用到制作导航菜单的属性中去！
现在来细细理解这几个的意思！
比如：
.test{
transition : border-color .5s ease-in .1s,
background-color .5s ease-in .1s,
color .5s ease-in .1s;
}
是什么意思？我们来把它拆分看看：
transition-property:border-color, background-color, color;//参与过渡的属性 transition-duration:.5s, .5s, .5s;//对象过渡持续的时间 transition-timing-function:ease-in, ease-in, ease-in;//对象过渡的动画类型 transition-delay:.1s, .1s, .1s;//对象延迟过渡的时间注意：如果其他属性一样的话，我们可以用同一个参数来表示就可以了，就比如除了transiton-propperty之外的三个就可以写一个值就可以了，如下：
transition-property:border-color, background-color, color;
transition-duration:.5s;
transition-timing-function:ease-in;
transition-delay:.1s;注意：如果比如transition-property的所有属性都需要的话，而其他属性参数都一样的话，可以这样表示：
transition : all .5s ease-in .1s;
拆分就是这样：
transition-property:all; transition-duration:.5s; transition-timing-function:ease-in; transition-delay:.1s;
现在我们用一个实例来实现以下吧
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<style>
.test{
overflow:hidden;
100%;
margin:0;
padding:0;
list-style:none;
}
.test li{
float:left;
100px;
height:100px;
margin:0 5px;
border:1px solid #ddd;
background-color:#eee;
text-align:center;
-moz-transition:background-color .5s ease-in;
-webkit-transition:background-color .5s ease-in;
-o-transition:background-color .5s ease-in;
-ms-transition:background-color .5s ease-in;
transition:background-color .5s ease-in;
//可以看到，我们只设置了背景颜色一个属性，动画持续过渡时间为5s，动画的类型为 ease-in,没有设置延迟时间。
}
.test li:nth-child(1):hover{background-color:#bbb;}
.test li:nth-child(2):hover{background-color:#999;}
.test li:nth-child(3):hover{background-color:#630;}
.test li:nth-child(4):hover{background-color:#090;}
.test li:nth-child(5):hover{background-color:#f00;}
</style>
</head>
<body>
<ul class="test">
<li>背景色过渡</li>
<li>背景色过渡</li>
<li>背景色过渡</li>
<li>背景色过渡</li>
<li>背景色过渡</li>
</ul>
</body>
</html>
这样做就省去了使用JavaScript来控制了，这个值得注意学习！