在CSS3中，我们可以使用transition-duration属性来定义过渡的持续时间。

语法：

transition-duration: 时间;

说明：

transition-duration属性取值是一个时间，单位为秒（s），可以取小数。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            display:inline-block;
            width:100px;
            height:100px;
            background-color:lightskyblue;
            transition-property:border-radius;
            transition-duration:0.5s;
            transition-timing-function:linear;
            transition-delay:0s;
        }
        div:hover
        {
            border-radius:50px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

默认情况下，预览效果如下图所示。

当鼠标移到元素上时，元素会慢慢过渡到图所示的效果。

分析：

在这个例子中，我们使用transition-duration属性指定了过渡效果的持续时间为0.5秒。当鼠标移动到元素上时，元素的圆角半径（border-radius）在0.5秒内从0过渡到50px。当然，我们也可以把0.5s改为1s、2s等，然后看看实际效果。

transition-property:border-radius;
transition-duration:0.5s;
transition-timing-function:linear;
transition-delay:0s;

在实际开发中，我们很少会使用过渡效果的完整形式，都是采用下面这种简写形式：

transition: border-radius 0.5s linear 0s;