<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS-JS-Animation</title>
<style>
body{
background-color:#333333;
}
</style>
</head>
<body>
<div id="ship"></div>
<script>
var styles = {};
styles.cursor = "pointer";
styles.width = "75px";
styles.height = "75px";
spriteAnimation("ship", "http://naxel.github.io/demos/canvas-css-js-animation/ship.png", styles);
function spriteAnimation(elementId, imgName, styles) {
var img = document.createElement("img");
var offset = 0;
img.onload = function() {
var element = document.getElementById(elementId);
element.style.cursor = styles.cursor;
element.style.width = styles.width;
element.style.height = styles.height;
element.style.background = "url('" + imgName + "') " + offset + "px 50%";
var i = 0;
interval = setInterval(function() {
if (offset < img.width) i++;
else {
i = 0;
clearInterval(interval);
window.setTimeout(function() {
spriteAnimation(elementId, imgName, styles)
}, 2000)
}
offset = 75 * i;
element.style.background = "url('" + imgName + "') " + offset + "px 50%"
}, 1000 / 24)
};
img.src = imgName
};
</script>
</body>
</html>