CSS步进动画实现特效

项目介绍：

本篇文章将向大家介绍，如何通过CSS步进动画实现僵尸运行特效：

项目场景：只需一个DOM节点，纯CSS实现步进动画僵尸运动特效。

---

问题描述

提示：纯CSS实现僵尸运动：

僵尸运动特效，有一个小僵尸在不停的向前走动，我看到其他人通过JavaScript的方式实现了特效。于是自己就尝试写了一个只需要CSS就能实现僵尸运动的特效，废话不多说，直接上效果图和代码。

运行效果 ：

源码代码 ：

HTML代码

	<div class="box"></div>

CSS代码

			.box{
				width: 200px;
				height: 312px;
				background: url(img/walkingdead.png) no-repeat;
				animation: name 1s steps(10,end) infinite;
			}
			/* 定义关键帧 */
			@keyframes name{
				form{
					/* 背景定位 */
					background-position:  0;
				}
				to{
					background-position: -2000px 0;
				}
			}

你没有看错，只有一个DOM节点，外加一些CSS，就实现了僵尸运动效果。

分析：

通过上面的CSS代码可以看到，我通过引用一张背景图片，定义关键帧，设置适合高度、宽度，设置背景图片定位就实现了僵尸运动。

附上背景图片：

以上代码如有疑问，欢迎下方评论，谢谢！