Creating a basic animation with JavaScript here. Even though CSS keyframes are an option, they won't do the trick for this particular project. That's why I'm sticking to a JavaScript solution and included a status div to give you an idea of what's going on. Check out the JSfiddle below.
So, here is the HTML snippet:
<div id="zero-walking"><img src="#" id="zeroImage"></div>
<div id="statusDiv"></div>
And here is the JavaScript part:
var index = 0;
var zero = document.getElementById("zeroImage");
var zeroArray = ["images/1.png", "images/2.png", "images/3.png", "images/4.png", "images/5.png", "images/6.png", "images/7.png", "images/8.png", "images/9.png", "images/10.png", "images/11.png"];
zeroAnimate();
function zeroAnimate() {
zero.setAttribute('src', zeroArray[index]);
index += 1;
if (index == zeroArray.length) {
index = 0;
}
var statusDiv = document.getElementById('statusDiv');
statusDiv.innerHTML = zeroArray[index];
}
setInterval(zeroAnimate, 700);