实例 animation-fill-mode [播放后的状态]

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!DOCTYPE HTML>							
<html>							
	<head>							
		<meta charset="utf-8">							
		<title>实例
		</title>						
	</head>							
	<body>							
		<style type="text/css">.demo_box{
			border:1px solid #3DA5DC;
			background:#a4dcf9;
			height:100px;
			width:200px;
			text-align:center;
			color:#fff;
			}
			.demo_box{
				-webkit-animation:f1 2s 0.5s 1  linear;
				-moz-animation:f1 2s 0.5s 1  linear;
				position:relative;
				left:10px;
				width:100px;
				height:100px;
				margin:10px 0;
				overflow:hidden;
			}
			.forwards{
				-webkit-animation-fill-mode:forwards;
				-moz-animation-fill-mode:forwards;
			}
			.backwards{
				-webkit-animation-fill-mode:backwards;
				-moz-animation-fill-mode:backwards;
			}
			@-webkit-keyframes f1{
				0%{
					left:10px;
				}
				100%{
					left:500px;
				}
			}
			@-moz-keyframes f1{
				0%{
					left:10px;
				}
				100%{
					left:500px;
				}
			}
		</style>
		<div class="demo_box forwards">我留在终点
		</div>
		<div class="demo_box backwards">我只回到原点
		</div>                        
	</body>				        
</html>