<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <pre><span id="cartoon"> </span></pre>
    <button type="button" name="button" onclick="startAnimation()">Start</button>
    <button type="button" name="button" onclick="pause()">Pause</button>
  </body>
  <script type="text/javascript">
  var frames = [
    ":3",
    ":3",
    ":O=3",
    ":O==3",
    ":O===3",
    ":OC===3",
    ":O C===3",
    ":O  C===3",
    ":O   C===3",
    ":O     C===3"
  ],
      frameCount = 0,
      time = 100,
      agoAnimation,
      forwardAnimation
      animationOn = false;

  function animation() {
    cartoon.innerHTML = frames[frameCount];
  }

  function startAnimation() {
    if (animationOn) return false;
    animationOn = true;
    forwardAnimation();
  }

  function forwardAnimation() {
    forwardInterval = setInterval(function () {
      if (frameCount === frames.length) {
        clearInterval(forwardInterval);
        frameCount--;
        agoAnimation();
        return false;
      }
      animation();
      frameCount++;
    }, time);
  }

  function agoAnimation() {
    agoInterval = setInterval(function () {
      frameCount--;
      animation();
      if (frameCount === 0) {
        clearInterval(agoInterval);
        frameCount++;
        forwardAnimation();
      }
    }, time);
  }

  function pause() {
    clearInterval(agoInterval);
    clearInterval(forwardInterval);
    animationOn = false;
  }
  </script>
</html>