分享一款基于CSS3 Sprite僵尸行走动画特效。这是一款使用animation动画的steps属性制作的僵尸行走CSS3 Sprite动画特效。效果图如下 ：

在线预览    源码下载

实现的代码。

css代码：

@charset "utf-8";
/* CSS Document */
/* General CSS */

*{
	padding:0px;
	margin:0px;
	
}

body,html {
	
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
	font-family: "Roboto", sans-serif;
	font-size: 12px;
	font-weight: 700;	
}

/*DEMO CSS*/

body{

	position:relative;
	background: transparent url("../img/background.jpg") no-repeat scroll center top / cover;
	background-attachment:fixed;
}

.zoombie {
	/*Our png sprite is 2000px x 312px, then each frame is 200px x 312px*/
    width: 200px;
    height: 312px;
    background-image: url("../img/walkingdead.png");
	-webkit-animation: play 1.8s steps(10) infinite;
	-moz-animation: play 1.8s steps(10) infinite;
	-ms-animation: play 1.8s steps(10) infinite;
	-o-animation: play 1.8s steps(10) infinite;
	animation: play 1.8s steps(10) infinite ;

}
	

@-webkit-keyframes play {
	from { background-position:    0px; }
	to { background-position: -2000px; }
}


@-moz-keyframes play {
	from { background-position:    0px; }
	to { background-position: -2000px; }
}

@-ms-keyframes play {
	from { background-position:    0px; }
	to { background-position: -2000px; }
}

@-o-keyframes play {
	from { background-position:    0px; }
	to { background-position: -2000px; }
}

@keyframes play {
	from { background-position:    0px;  }
	to { background-position: -2000px;  }
}



#wrapper {
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

via：http://www.w2bc.com/article/2015-12-15-css3-sprite-run

在线预览    源码下载