CSS stepping animation to achieve special effects

Project Introduction:

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

Project scene: Only one DOM node is needed, and pure CSS realizes the special effect of stepping animation zombie movement.

---

Problem Description

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

Zombie movement special effects, there is a small zombie walking forward, I saw other people realize the special effects through JavaScript. So I tried to write a special effect that only needs CSS to realize the movement of zombies. Without further ado, I uploaded the renderings and codes directly.

running result:

Source code:

HTML code

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

CSS code

			.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;
				}
			}

You read that right, there is only one DOM node, plus some CSS, to achieve the zombie movement effect.

analyze:

As you can see from the above CSS code, I realize the zombie movement by referencing a background image, defining key frames, setting the appropriate height and width, and setting the background image positioning.

Attach a background image:

If you have any questions about the above code, please comment below, thank you!