animation-delay

语法：

animation-delay：<time>[,<time>]*

默认值：0s

适用于：所有元素，包含伪对象:after和:before

继承性：无

动画性：否

计算值：指定值

媒体：视觉

取值：

<time>：: 指定对象动画延迟的时间

说明：

检索或设置对象动画的延迟时间

如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为animationDelay。

兼容性：

浅绿 = 支持
红色 = 不支持
粉色 = 部分支持

IE	Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Blackberry Browser	Opera Mobile	Chrome for Android	Firefox for Android	IE Mobile	UC Browser for Android	Samsung Internet	QQ Browser	Baidu Browser
5.5-9	12+	2-4	4-42 ^-webkit-	3.1-3.2	9-11.6	3.2-5.1 ^-webkit- #1	2.1-3 ^-webkit- #1	7-10 ^-webkit-	10-12	61	56	10+	11.4 ^-webkit-	4+	1.2 ^-webkit-	7.12
10+		5-15 ^-moz-	43+	4-5 ^-webkit- #2	12 ^-o-	6.0-8.4 ^-webkit-	4-4.4.4 ^-webkit-		12.1+
		16+		5.1-8 ^-webkit-	12.1	9.0+
				9+	15-29 ^-webkit-
				9+	30+

在一些场景中会有错误行为
部分浏览器不支持伪元素动画，或者支持得不够好，尽可能不要利用伪元素来做动画
通过selectivizr，可以免去css3前缀。本页下方的示例已使用此方案。

示例：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>animation-delay_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script src="../../js/prefixfree.min.js"></script>
<style>
h1 {
	font-size: 16px;
}
p {
	position: relative;
	z-index: 2;
	height: 200px;
	margin: 300px 0 0 0;
	background: #fff;
}
p:after {
	position: absolute;
	z-index: 3;
	top: 0px;
	left: 0;
	width: 100%;
	height: 1px;
	background: #ddd;
	content: '';
	box-shadow: 0 0 30px 1px rgba(0, 0, 0, .9);
}
div {
	width: 100px;
	height: 100px;
	padding: 10px;
	border-radius: 61px;
	box-shadow: 0 0 10px rgba(204, 102, 0, .8);
	background: #F6D66E;
	background: -webkit-linear-gradient(top, #fff, #F6D66E);
	background: -moz-linear-gradient(top, #fff, #F6D66E);
	background: linear-gradient(to bottom, #fff, #F6D66E);
	animation: animations 6s ease 1s forwards;
}
@keyframes animations {
	0% {
		transform: translate(0, 0);
	}
	55% {
		transform: translate(480px, 360px);
	}
	100% {
		transform: translate(600px, 450px);
	}
}
</style>
</head>
<body>
<h1>太阳将在1s后开始下山：</h1>
<div></div>
<p></p>
</body>
</html>