Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; cronometro has a deprecated constructor in /home/wdrfree/public_html/model/admin/model.php on line 4
CSS3 animation loop Sprite (with keyframes) | wdrfree ▷

CSS3 animation loop Sprite (with keyframes)

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


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

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