在CSS3中，我们可以使用animation-delay属性来定义动画的延迟时间。CSS3动画的animation-delay属性跟CSS3过渡的transition-delay属性是相似的。

语法：

animation-delay: 时间;

说明：

animation-delay属性取值是一个时间，单位为秒（s），可以为小数，其中默认值为0s。也就是说，当我们没有定义animation-delay时，动画就没有延迟时间。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        @keyframes mytranslate
        {
            0%{}
            100%{transform:translateX(160px);}
        }
        #ball
        {
            width:40px;
            height:40px;
            border-radius:20px;
            background-color:red;
            animation-name:mytranslate;
            animation-duration:2s;
            animation-timing-function:linear;
            animation-delay:2s;    /*设置动画在页面打开之后延迟2s开始播放*/
        }
        #container
        {
            display:inline-block;
            width:200px;
            border:1px solid silver;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="ball"></div>
    </div>
</body>
</html>

浏览器预览效果如下图所示。

分析：

这里使用animation-delay属性定义动画的延迟时间为两秒，也就是说当页面打开后，动画需要延迟两秒才会开始执行。

animation-name:mytranslate;
animation-duration:2s;
animation-timing-function:linear;
animation-delay:2s;

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

animation: mytranslate 2s linear 2s;