H5小动画（会动的僵尸）

-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>

---