Game sprite animation

Question

I am making a game and I want to animate my character(attacking, walking, etc) but I don't have an idea on how to do it. I know it is not for loop because if it is, the animation will play in an instant you won't be able to see it. I have downloaded a sample sprite sheet and I will test on it once I learn how to do it.

Answer 1

You can obtain sprites animation using CSS3's steps() function where supported. Or a plain javascript approach using timers (setTimeout, setInterval).

Here a simple examples of both: http://codepen.io/anon/pen/hCeuG

However for the JS part, it's better if you have a single game loop where you update your animation, that it's just an example. You can find a very deep explanation about javascript game loop here: http://nokarma.org/2011/02/02/javascript-game-development-the-game-loop/index.html