CSS3中，添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。用鼠标移过即可。
案例1：
<body>
<div></div>
</body>div
{
width:100px;
height:100px;
background:red;
transition:width 2s;/*宽度width变大，时长2s*/
-webkit-transition:width 2s; /* Safari */
}
div:hover
{
width:300px;
}
案例2：
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
transition: width 2s, height 2s, transform 2s;/*宽度变化2s,高度2s,transform中rotate旋转2s*/
}
div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
案例3：
div
{
width:100px;
height:100px;
background:red;
transition-property:width;/*宽度*/
transition-duration:1s;/*运行时间*/
transition-timing-function:linear;/*线性匀速*/
transition-delay:2s;/*一开始停留2s*/
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
div:hover
{
width:200px;
}
等同于：
{
width:100px;
height:100px;
background:red;
transition:width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
div:hover
{
width:200px;
}
