Tự code rồi chạy thử... Chạy Thử

<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính animation-delay trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#chohaigiay {
    border: 1px solid red;
    text-align: center;
    padding: 5px;
    width: 100px;
    position: relative;
    animation-name: quaPhai; /* Áp dụng animation có tên "quaPhai" */
    animation-duration: 6s; /* Thời gian diễn ra animation là 6s*/
    animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/  
    animation-delay: 2s; /*Chờ 2 giây*/
}
#chobagiay {
    border: 1px solid red;
    text-align: center;
    padding: 5px;
    width: 100px;
    position: relative;
    animation-name: quaPhai; /* Áp dụng animation có tên "quaPhai" */
    animation-duration: 6s; /* Thời gian diễn ra animation là 6s*/
    animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/  
    animation-delay: 3s; /*Chờ 3 giây*/
}
#khongcho {
    border: 1px solid red;
    text-align: center;
    padding: 5px;
    width: 100px;
    position: relative;
    animation-name: quaPhai; /* Áp dụng animation có tên "quaPhai" */
    animation-duration: 6s; /* Thời gian diễn ra animation là 6s*/
    animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/  
    animation-delay: initial; /*Không chờ, chạy ngay lập tức*/
}
@keyframes quaPhai{
    from {left: 0px;}
    to {left: 100%;}
}
</style>
</head>
<body>

<h1>Code Thuộc tính animation-delay trong CSS</h1>

<p>Dùng để quy định thời gian chờ trước khi thực hiện một sự kiện về một animation, giá trị nhập vào là con số, hoặc initial là không chờ (chạy ngay lập tức), inherit là thừa hưởng giá trị animation-delay từ phần tử cha:</p>

<p><span id="chohaigiay">animation-delay: 2s; (Chờ 2 giây)</span></p>

<p><span id="chobagiay">animation-delay: 3s; (Chờ 3 giây)</span></p>

<p><span id="khongcho">animation-delay: initial; (Không chờ)</span></p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính animation-delay trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#chohaigiay {
    border: 1px solid red;
    text-align: center;
    padding: 5px;
    width: 100px;
    position: relative;
    animation-name: quaPhai; /* Áp dụng animation có tên "quaPhai" */
    animation-duration: 6s; /* Thời gian diễn ra animation là 6s*/
    animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/  
    animation-delay: 2s; /*Chờ 2 giây*/
}
#chobagiay {
    border: 1px solid red;
    text-align: center;
    padding: 5px;
    width: 100px;
    position: relative;
    animation-name: quaPhai; /* Áp dụng animation có tên "quaPhai" */
    animation-duration: 6s; /* Thời gian diễn ra animation là 6s*/
    animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/  
    animation-delay: 3s; /*Chờ 3 giây*/
}
#khongcho {
    border: 1px solid red;
    text-align: center;
    padding: 5px;
    width: 100px;
    position: relative;
    animation-name: quaPhai; /* Áp dụng animation có tên "quaPhai" */
    animation-duration: 6s; /* Thời gian diễn ra animation là 6s*/
    animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/  
    animation-delay: initial; /*Không chờ, chạy ngay lập tức*/
}
@keyframes quaPhai{
    from {left: 0px;}
    to {left: 100%;}
}
</style>
</head>
<body>

<h1>Code Thuộc tính animation-delay trong CSS</h1>

<p>Dùng để quy định thời gian chờ trước khi thực hiện một sự kiện về một animation, giá trị nhập vào là con số, hoặc initial là không chờ (chạy ngay lập tức), inherit là thừa hưởng giá trị animation-delay từ phần tử cha:</p>

<p><span id="chohaigiay">animation-delay: 2s; (Chờ 2 giây)</span></p>

<p><span id="chobagiay">animation-delay: 3s; (Chờ 3 giây)</span></p>

<p><span id="khongcho">animation-delay: initial; (Không chờ)</span></p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính animation-delay trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#chohaigiay {
    border: 1px solid red;
    text-align: center;
    padding: 5px;
    width: 100px;
    position: relative;
    animation-name: quaPhai; /* Áp dụng animation có tên "quaPhai" */
    animation-duration: 6s; /* Thời gian diễn ra animation là 6s*/
    animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/  
    animation-delay: 2s; /*Chờ 2 giây*/
}
#chobagiay {
    border: 1px solid red;
    text-align: center;
    padding: 5px;
    width: 100px;
    position: relative;
    animation-name: quaPhai; /* Áp dụng animation có tên "quaPhai" */
    animation-duration: 6s; /* Thời gian diễn ra animation là 6s*/
    animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/  
    animation-delay: 3s; /*Chờ 3 giây*/
}
#khongcho {
    border: 1px solid red;
    text-align: center;
    padding: 5px;
    width: 100px;
    position: relative;
    animation-name: quaPhai; /* Áp dụng animation có tên "quaPhai" */
    animation-duration: 6s; /* Thời gian diễn ra animation là 6s*/
    animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/  
    animation-delay: initial; /*Không chờ, chạy ngay lập tức*/
}
@keyframes quaPhai{
    from {left: 0px;}
    to {left: 100%;}
}
</style>
</head>
<body>

<h1>Code Thuộc tính animation-delay trong CSS</h1>

<p>Dùng để quy định thời gian chờ trước khi thực hiện một sự kiện về một animation, giá trị nhập vào là con số, hoặc initial là không chờ (chạy ngay lập tức), inherit là thừa hưởng giá trị animation-delay từ phần tử cha:</p>

<p><span id="chohaigiay">animation-delay: 2s; (Chờ 2 giây)</span></p>

<p><span id="chobagiay">animation-delay: 3s; (Chờ 3 giây)</span></p>

<p><span id="khongcho">animation-delay: initial; (Không chờ)</span></p>

</body>
</html>

Code Thuộc tính animation-delay trong CSS nằm trong bài viết Thuộc tính animation-delay trong CSS