I've tried a bunch of different things and nothing seems to work so I am hoping someone here has some free time and wants to help out. I am trying to create javascript for an animation of a sprite strip that has 11 images stacked vertically with each frame being 640 x 889. I want the animation to start when the window opens and run through the frames back and forth 3 times and then stop. There are 11 frames the sequence should go 1....11 then 11...1, three times and take a total of 3 seconds to complete the three loops. Thanks in advance for the help. 

HTML:

```
<!DOCTYPE html>
<html>
<head>
    <script src="jquery-1.8.2.js"></script>
    <meta name ="viewport" content = "width=640, user-scalable=yes">
    <link rel="stylesheet" href="animate.css"/>
    <title>Website</title>
</head>
<body>
    <div id="bmw-glow">
    <script type="text/javascript">
    var fps          = 11,
    currentFrame = 0,
    totalFrames  = 11,
    elem         = document.getElementById("bmw-glow"),
    currentTime  = new Date().getTime();

(function animloop(time){
  var delta = (time - currentTime) / 1000;

  currentFrame += (delta * fps);

  var frameNum = Math.floor(currentFrame);

  if (frameNum >= totalFrames) {
    currentFrame = frameNum = 0;
  }

  requestAnimationFrame(animloop);

  elem.style.backgroundPosition = "0 -" + (frameNum * 889) + "px";

  currentTime = time;
})(currentTime);
</script>
</div>
</body>
</html>

```

CSS:

```
#bmw-glow {
  width: 640px;
  height: 889px;
  margin: 0px;
  background: url("images/Social/Social_6_S.jpg");
}

```