-css样式：
#container{
-webkit-transform:translate(-100px,-50px);
transform:translate(-50%px );
position: absolute;
top: 50%;
left: 50%;
background-color: red;
}
@keyframes zomanimate{
0% { background-position: 0px; }
100%{ background-position: -2000px }
}
@-webkit-keyframes zomanimate {
0%{background-position:0px}
100%{background-position: -2000px}
}
#zombie{
position: absolute;
//图片宽为2000个像素共10幅等宽图
background-image: url("../image/walkingdead.png");
background-color: yellow;
width: 200px;
height:312px;
animation: zomanimate 1.5s steps(10) infinite;
-webkit-animation:zomanimate 1.5s steps(10) infinite;
}
//steps方法跳过动画中间的过程直接过度到下一帧 10代表从0%到100%分成10组
等价于0% { background-position: 0px; }
10% { background-position: -200px; }
20%{ background-position: -400px }
30%{ background-position: -600px }
40%{ background-position: -800px }
50%{ background-position: -1000px }
60%{ background-position: -1200px }
80%{ background-position: -1400px }
900%{ background-position: -1600px }
100%{ background-position: -2000px }
html文件
<div id="container">
<div id="zombie"></div>
</div>
