CSS3动画之奔跑的小熊熊案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		.back{
			position: relative;
			margin: 300px auto;
			width: 100%;
			height: 400px;
			background: url("back.png") no-repeat;
			animation: back 8s linear infinite;
		}
		.bear{
			position: absolute;
			top:200px;
			width: 200px;
			height: 100px;
			background: url("bear.png") no-repeat;
			animation: bear 1s steps(8) infinite,move 3s forwards;
		}
		/*背景*/
		@keyframes back {
			0%{
				background-position: 0 0;
			}
			100%{
				background-position: 100% 0;
			}
		}
		/*第二段-熊*/
		@keyframes bear {
			0%{
			
			}
			100%{
				background-position: -1600px 0px;
			}
		}
		/*熊-第一段*/
		@keyframes move {
			0%{
				left: 0;
			}
			100%{
				left:50%;
				transform: translate(-50%);
			}
		}
	</style>
</head>
<body>
	<div class="back">
		<div class="bear"></div>
	</div>
</body>
</html>

图片在这里：
在这里插入图片描述
在这里插入图片描述