CSS3 animation loop Sprite (with keyframes)
Thursday 29th, Dec, 2016 | #CSS2 / CSS3 #Pure CSS #HTML5 Game
DemoHi 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