一个元素在切换状态时，比如:hover，:active，定义过渡效果。
- transition-property
过渡属性 - transition-duration
过渡属性从旧值转变到新值所需要的时间 - transition-timing-function
调速函数，默认是ease - transition-delay
等待多久才开始过渡效果。
正值，则延迟指定时间再开始过渡效果；
负值，则立即开始过渡效果。
不用transition
<body> <div class="box"></div>
</body>
.box{
width:100px;height:100px;background-color:lightskyblue;
}
.box:hover{
width:200px;
}
鼠标滑入，div.box的width从100px --> 200px，突变；
鼠标滑出，div.box的width从200px --> 100px，突变。
transition放在:hover里
.box{
width:100px;height:100px;background-color:lightskyblue;
}
.box:hover{
width:200px;transition:width 2s;
}
鼠标滑入，div.box的width从100px --> 200px，过渡；
鼠标滑出，div.box的width从200px --> 100px，突变。
transition放在正常状态里
.box{
width:100px;height:100px;background-color:lightskyblue;transition:width 2s;
}
.box:hover{
width:200px;
}
鼠标滑入，div.box的width从100px --> 200px，过渡；
鼠标滑出，div.box的width从200px --> 100px，过渡。
参考文档
transition