在 CSS3 中，我们如果想要实现一种样式到另一种样式的转变，无需再使用 Flash 动画或者是 JavaScript ，CSS3 为我们提供了过渡的效果。
transition
属性 transition 应用于元素的过渡效果，使用时需要指定希望过渡的属性以及过渡持续的时间。
transition属性对应了四个值：
transition: transition | transition-duration | transition-timing-function |
transition-delay;
- transition-property 规定了应用于过渡效果的 CSS 属性的名称，默认值为
all。 - transition-duration 规定了过渡持续的时间，默认值为
0s。也就是说，如果不指定过渡时间，那么将不会产生过渡效果。 - transition-timing-function 规定了过渡效果的时间曲线，如
ease（默认）：慢速开始，中间变快，慢速结束。liner：匀速运动。 - transition-delay 规定了过渡效果的延迟时间，默认为
0s。
transition-timing-function 有一些常用的值：
- linear:匀速，相当于（
cubic-bezier(0,0,1,1)）。 - ease:慢速开始，然后变快，然后慢速结束，相当于（
cubic-bezier(0.25,0.1,0.25,1)）。 - ease-in:慢速开始，相当于（
cubic-bezier(0.42,0,1,1)）。 - ease-out:慢速结束，相当于（
cubic-bezier(0,0,0.58,1)）。 - ease-in-out:慢速开始，慢速结束，相当于（
cubic-bezier(0.42,0,0.58,1)）。 - cubic-bezier(n,n,n,n):在
cubic-bezier函数中定义自己的值，取值范围是0 ~ 1。
当指定多个属性的过渡效果时，用逗号隔开即可：
transition: width 2s ease-in-out, height 2s ease-in-out;
<!DOCTYPE html>
<html>
<head>
<title>shiyanlou</title>
<style type="text/css">
.div1 {
margin: 50px;
width: 200px;
height: 200px;
background-color: lightgreen;
opacity: 0.5;
transition: 2s ease-in-out;
/*transition-property 默认为 all，所以将应用到 width 和 height 上*/
}
.div1:hover {
width: 400px;
height: 400px;
opacity: 1;
}
.div2 {
margin: 50px;
width: 200px;
height: 200px;
background-color: cyan;
opacity: 0.5;
transition: height 2s cubic-bezier(0.25, 0.1, 0.25, 1);
/*transition-property 只指定了 height，所以 width 的改变不会使用过渡效果;cubic-bezier(0.25,0.1,0.25,1) 相当于 ease，慢速开始，然后变快，慢速结束。*/
}
.div2:hover {
width: 400px;
height: 400px;
opacity: 1;
}
.div3 {
margin: 50px;
width: 200px;
height: 200px;
background-color: orange;
opacity: 0.5;
transition: 2s ease-in-out 2s;
/*transition-delay 设置为 2s，当鼠标移到该盒子上，过渡效果将会延迟 2s 开始、结束*/
}
.div3:hover {
width: 400px;
height: 400px;
opacity: 1;
}
.div4 {
margin: 50px;
width: 200px;
height: 200px;
background-color: grey;
opacity: 0.5;
transition: ;
/*所有属性使用默认值，transition-timing-function 的默认值为 0s，所以 div4 无过渡效果*/
}
.div4:hover {
width: 400px;
height: 400px;
opacity: 1;
}
</style>
</head>
<body>
<div class="div1">div1 transition: 2s ease-in-out;</div>
<div class="div2">
div2 transition: height 2s cubic-bezier(0.25,0.1,0.25,1);
</div>
<div class="div3">div3 transition: 2s ease-in-out 2s;</div>
<div class="div4">div4 transition: ;</div>
</body>
</html>
将鼠标挪动到矩形上观察效果。
可以发现，div1 的持续时间设置为 2s，效果采用 ease-in-out，其余为默认值，所以 opacity、width、height 的改变都会采用过渡效果；div2 中指定了过渡的属性为 height，所以其它两个属性不会使用过渡效果；div3 设置了 transition-delay，过渡效果的开始和结束都会延迟相应的时间；div4 所有的值都使用默认值，包括持续时间 0s，所以 div4 无过渡效果，变化会非常生硬。
自行改变 transition 的值查看效果。
