在CSS3中，我們可以使用animation-delay屬性來定義動畫播放的延遲時間。其中，animation-delay屬性跟CSS3過渡中的transition-delay屬性相似。
語法：
animation-delay:時間;
說明：
animation-delay屬性取值是一個時間，單位為s（秒），可以為小數如0.5s。
animation-delay屬性默認值為0，也就是說當我們沒有設置animation-delay屬性時，CSS3動畫就沒有延遲時間。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 animation-delay屬性</title>
<style type="text/css">
@-webkit-keyframes mytranslate
{
0%{}
100%{-webkit-transform:translateX(100px);}
}
#div1
{
width:40px;
height:40px;
border-radius:20px;
background-color:red;
-webkit-animation-name:mytranslate;
-webkit-animation-timing-function:linear;
-webkit-animation-duration:2s;
-webkit-animation-delay:2s;/*設置動畫在頁面打開之後延遲2s開始播放*/
}
#container
{
display:inline-block;
width:140px;
border:1px solid silver;
}
</style>
</head>
<body>
<div id="container">
<div id="div1"></div>
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
這裡使用animation-delay屬性設置動畫延遲時間為2s，也就是說當頁面打開之後延遲2s動畫才開始播放，大家可以在在線測試中可以看到實際效果。