CSS3 animation loop Sprite (with keyframes)

Thursday 29th, Dec, 2016 | #CSS2 / CSS3 #Pure CSS #HTML5 Game

Demo

---

Hi guys, I'm going to start a series of tutorials to enter the world of html5 game programming. Today we will learn to animate a sprite using the fantastic power of keyframes (Pure CSS javascript nothing) and as i love WalkingDead will use a funny png sprite from http://opengameart.org

Zoombie CSS3 Animation loop

Really is very simple, check this code css example

.zoombie {
	width: 200px;
	height: 312px;
	animation: play 1.8s steps(10) infinite ;
}

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

As the size of our png is 2000px x 312px, and this have 10 Frame, each frame size is 200px x 312px. 1.8 is animation time, the step parameter value is 10 (10 Frame) and infinite the animation repetition.

Now you can check out our demo to see the animation operation