jsbin.oyIBUgA.css

.gangnam-pic {
  width: 110px;
  height: 30px;
  display: inline-block;
  background: #fcc url('http://s.ytimg.com/yts/img/doodles/youtube_yoodle_psy_110x30-vflOeb25k.png') 0px 0px no-repeat;
  outline: 1px solid red;
}

.gangnam02.start {
  animation: g-anim 26.5s steps(53) infinite normal;
}

@keyframes g-anim {
  to {
    background-position: -5830.01px 0;
  }
}

#switcher:hover {
  border-style: inset;
}

jsbin.oyIBUgA.jade

<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  
#box1
  p js
  .gangnam-pic.gangnam01

#box2
  p css3 animation
  .gangnam-pic.gangnam02

hr

span#counter 0
button#switcher hover-in to start

jsbin.oyIBUgA.js

var gg = document.getElementsByClassName('gangnam-pic'),
    counter = document.getElementById('counter'),
    g1 = gg[0],
    g2 = gg[1],
    g_anim= {
      count: 0,
      time : 500, // ms
      frames: 53
    };


window.onload = function(){
  var hoverinTime = 0,
      frames = 5830 / 110, // 53 frames
      frameTime = 500, // ms
      ggX    = g1,
      ggC    = document.getElementById('counter'),
      ggS    = document.getElementById('switcher'),
      ggPosX = function() {
        console.log(ggX.style.backgroundPosition);
        ggX.style.backgroundPosition = (-110*hoverinTime) +'px 0px';
        ggC.innerHTML = hoverinTime;
        hoverinTime = (hoverinTime + 1) % frames;
      };

  var startDancing = function(){
    loopD = window.setInterval( ggPosX, frameTime);
    g2.classList.add('start');
  },
  stopDancing = function(){
    clearInterval(loopD);
    g2.classList.remove('start');
    hoverinTime = 0;
    ggPosX();
  };

  ggS.onmouseover = startDancing;
  ggS.onmouseout = stopDancing;
};