animation-delay

div {
	animation-delay: 3s;
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
	-ms-animation-delay: 3s;
}

div {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s infinite;
	-webkit-animation: hogeanime1 3s infinite;
	-moz-animation: hogeanime1 3s infinite;
	-ms-animation: hogeanime1 3s infinite;
	
	animation-delay: 3s;
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
	-ms-animation-delay: 3s;
}

* Version information is based on MDN / Can I Use .

You can specify the wait time before the animation starts.

When using the 'animation' property, you must also define '@keyframes' separately. Please note that the animation will not work without '@keyframes'.

To write '@keyframes', write '@keyframes' followed by an arbitrary 'animation name', then enclose the content in '{}'. Inside, define property changes according to the progress state between '0%' and '100%'. '0%' represents the start and '100%' represents the end. You can also use 'from' instead of '0%' and 'to' instead of '100%', but using '%' is more common.

/* Enclose the content in '{}' and define the timing and state of changes inside. */
@keyframes hogeanime1 {
	0% { width: 200px;}
	50% { width: 300px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	50% { width: 300px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	50% { width: 300px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	50% { width: 300px;}
	100% { width: 400px;}
}

You can specify multiple animation start delays simultaneously by separating the 'animation-delay' values with ','.

div {
	background: #f00;
	width: 200px;
	animation-name: hogeanime1, hogeanime2;
	-webkit-animation-name: hogeanime1, hogeanime2;
	-moz-animation-name: hogeanime1, hogeanime2;
	-ms-animation-name: hogeanime1, hogeanime2;
	
	animation-duration: 3s, 2s;
	-webkit-animation-duration: 3s, 2s;
	-moz-animation-duration: 3s, 2s;
	-ms-animation-duration: 3s, 2s;

	animation-delay: 2s, 3s;
	-webkit-animation-delay: 2s, 3s;
	-moz-animation-delay: 2s, 3s;
	-ms-animation-delay: 2s, 3s;
	
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}

@keyframes hogeanime2 {
	0% { background: #f00;}
	100% { background: #ff0;}
}
@-webkit-keyframes hogeanime2 {
	0% { background: #f00;}
	100% { background: #ff0;}
}
@-moz-keyframes hogeanime2 {
	0% { background: #f00;}
	100% { background: #ff0;}
}
@-ms-keyframes hogeanime2 {
	0% { background: #f00;}
	100% { background: #ff0;}
}

If there are fewer 'animation-delay' values than animation names (keyframes names), the specified values are applied cyclically.

div {
	background: #f00;
	width: 200px;
	animation-name: hogeanime1, hogeanime2, hogeanime3;
	-webkit-animation-name: hogeanime1, hogeanime2, hogeanime3;
	-moz-animation-name: hogeanime1, hogeanime2, hogeanime3;
	-ms-animation-name: hogeanime1, hogeanime2, hogeanime3;

	animation-duration: 3s, 2s;
	-webkit-animation-duration: 3s, 2s;
	-moz-animation-duration: 3s, 2s;
	-ms-animation-duration: 3s, 2s;

	animation-delay: 2s, 3s;
	-webkit-animation-delay: 2s, 3s;
	-moz-animation-delay: 2s, 3s;
	-ms-animation-delay: 2s, 3s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
			
@keyframes hogeanime2 {
	0%{ background: #f00;}
	100% { background: #ff0;}
}
@-webkit-keyframes hogeanime2 {
	0%{ background: #f00;}
	100% { background: #ff0;}
}
@-moz-keyframes hogeanime2 {	
	0%{ background: #f00;}
	100% { background: #ff0;}
}
@-ms-keyframes hogeanime2 {
	0%{ background: #f00;}
	100% { background: #ff0;}
}

@keyframes hogeanime3 {
	0%{ height: 50px;}
	100% { height: 100px;}
}
@-webkit-keyframes hogeanime3 {
	0%{ height: 50px;}
	100% { height: 100px;}
}
@-moz-keyframes hogeanime3 {	
	0%{ height: 50px;}
	100% { height: 100px;}
}
@-ms-keyframes hogeanime3 {
	0%{ height: 50px;}
	100% { height: 100px;}
}

If there are more 'animation-delay' values than animation names, the values exceeding the number of animation names are ignored.

div {
	background: #f00;
	width: 200px;
	animation-name: hogeanime1, hogeanime2;
	-webkit-animation-name: hogeanime1, hogeanime2;
	-moz-animation-name: hogeanime1, hogeanime2;
	-ms-animation-name: hogeanime1, hogeanime2;

	animation-duration: 3s, 2s;
	-webkit-animation-duration: 3s, 2s;
	-moz-animation-duration: 3s, 2s;
	-ms-animation-duration: 3s, 2s;

	animation-delay: 2s, 3s, 4s;
	-webkit-animation-delay: 2s, 3s, 4s;
	-moz-animation-delay: 2s, 3s, 4s;
	-ms-animation-delay: 2s, 3s, 4s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
			
@keyframes hogeanime2 {
	0%{ background: #f00;}
	100% { background: #ff0;}
}
@-webkit-keyframes hogeanime2 {
	0%{ background: #f00;}
	100% { background: #ff0;}
}
@-moz-keyframes hogeanime2 {	
	0%{ background: #f00;}
	100% { background: #ff0;}
}
@-ms-keyframes hogeanime2 {
	0%{ background: #f00;}
	100% { background: #ff0;}
}