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 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