在CSS3中，我們可以使用transition屬性來將元素的某一個屬性從“一個屬性值”在指定的時間內平滑地過渡到“另外一個屬性值”來實現動畫效果。額(⊙o⊙)…，大家對CSS3過渡的理解已經非常清楚了吧，因為這句話都重復了N遍。
其中，我們可以使用transition-delay屬性來設置動畫開始的延遲時間。
語法：
transition-delay:時間;
說明：
transition-delay屬性取值是一個時間，單位為s（秒），可以為小數如0.5s。
transition-delay屬性默認值為0，也就是說當我們沒有設置transition-delay屬性時，過渡動畫就沒有延遲時間。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 transition-delay屬性</title>
<style type="text/css">
div
{
display:inline-block;
width:100px;
height:100px;
border-radius:0;
background-color:#14C7F3;
transition-property:border-radius;
transition-duration:1s ;
transition-timing-function:linear;
transition-delay:2s;
}
div:hover
{
border-radius:50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
“transition-delay:2s;”表示鼠標移動到div的那一瞬間開始計時，在計時開始之後還得延遲2s才會開始進行過渡動畫，這就是所謂的“延遲時間”。然後當鼠標移出div一瞬間開始，過渡動畫同樣也會延遲2s才會開始恢復。