在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;