Walk Cycle

You must first draw four drawings of a character taking four steps ahead to begin with, such as the examples shown below.

Afterwards, you must make sure that each image's width is the same as the one with the widest width (the one that has the character's legs spread), so that when the animation begins, it doesn't jiggle back and forth because the four images have different width from one another.

Then in the coding stylesheet, we insert these specific codes to make the image moving.

#walk { width: 200px; height: 395px; background: url("spritesheet.jpg"); animation: play 0.8s steps(4) infinite; }

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

The #walk code set the size of the div container where the image size is fixed, think of it like a window size. The animation code in the #walk will keep a timer on the time when the images will change. While the @keyframes play set the spirtesheet moving from which point to which point.