在CSS3中，我们可以使用transition-delay属性来定义过渡效果的延迟时间。

语法：

transition-delay: 时间;

说明：

transition-delay属性取值是一个时间，单位为秒（s），可以是小数，默认值为0s。也就是说，当我们没有定义transition-delay时，过渡效果就没有延迟时间。

举例：

在线测试
<!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: 2s;
        }
        div:hover
        {
            border-radius:50px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

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

当鼠标移到元素上时，2秒后的预览效果如下图所示。

分析：

transition-delay: 2s;表示从鼠标移动到div元素上的那一瞬间开始计时，过了两秒钟后才会开始呈现过渡效果，这就是所谓的延迟时间。然后当鼠标移出div元素的一瞬间开始计时，过渡效果同样也会延迟两秒钟才会开始恢复。

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

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

transition: border-radius 0.5s linear 2s;