animation-fill-mode

语法：

animation-fill-mode：<single-animation-fill-mode>[,<single-animation-fill-mode>]*

<single-animation-fill-mode> = none | forwards | backwards | both

默认值：none

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

继承性：无

动画性：否

计算值：指定值

媒体：视觉

取值：

none：: 默认值。不设置对象动画之外的状态
forwards：: 设置对象状态为动画结束时的状态
backwards：: 设置对象状态为动画开始时的状态
both：: 设置对象状态为动画结束或开始的状态

说明：

检索或设置对象动画时间之外的状态

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

兼容性：

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

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+

部分浏览器不支持伪元素动画，或者支持得不够好，尽可能不要利用伪元素来做动画

示例：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>animation-fill-mode_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;
}
li {
	padding: 10px;
}
span {
	display: block;
	width: 80px;
	height: 80px;
	padding: 10px;
	border-radius: 50px;
	box-shadow: 0 0 10px rgba(204, 102, 0, .8);
	background: #F6D66E;
	background: linear-gradient(to bottom, #fff, #F6D66E);
}
.none span {
	animation: animations 1s ease;
}
@keyframes animations {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(400px);
	}
}
.forwards span {
	animation: animations2 1s ease forwards;
}
@keyframes animations2 {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(400px);
	}
}
.backwards span {
	animation: animations3 1s ease backwards;
}
@keyframes animations3 {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(400px);
	}
}
.both span {
	animation: animations4 1s ease both;
}
@keyframes animations4 {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(400px);
	}
}
</style>
</head>
<body>
<h1>animation-fill-mode：</h1>
<ul>
	<li class="none">
		<strong>none: </strong>
		<span></span>
	</li>
	<li class="forwards">
		<strong>forwards: </strong>
		<span></span>
	</li>
	<li class="backwards">
		<strong>backwards: </strong>
		<span></span>
	</li>
	<li class="both">
		<strong>both: </strong>
		<span></span>
	</li>
</ul>
</body>
</html>