Zepto.js/CSS3 Webkit Transforms Slows down after .anim() event

I have a weird one. I'm making a small iPad mobile web page which has 2 buttons. One which if you touch adds and removes a class to an object (which is just an image sprite which shifts its background position.) The second animates the same object. However after I have pressed the animate function triggering button the add/remove class function goes really really slowly. So slowly that you see the sprite image background position shift in slow motion? I am puzzled? Now the Zepto.js anim function uses webkit css3 transforms. Could it be an issue with them? They are pretty recent?

CSS

#hero {
    left: 3开发者_JS百科20px;
    position: absolute;

}
.hero_crouch {
    background: url(../assets/sprites/sprites_8.png) 1px 0;
    width: 109px;
    height: 130px;
}

Button 1:

$('#hero').addClass('hero_walk') //initial class added
$('#bottom_mid a').bind('touchstart', function() {
          return $('#hero').addClass('hero_crouch');
        }); //new class temporarily added on touch
$('#bottom_mid a').bind('touchend', function() {
          return $('#hero').removeClass('hero_crouch'); // then class removed again

Button 2:

 $('#mid_right a').bind('touchstart', function() {
      return $('#hero').anim({
        translate3d: '50px, 0px, 0px'
      }, 1, 'ease-in-out 1ms');
    });

I've never used Zepto, but it seems that this problem might be related: Slow animation with webkit-transform translate() in iPhone OS 3.0

Try doing this through css:

#hero {
  /*your code*/
  -webkit-transition: -webkit-transform 1s ease-in-out;
}
.anim {
  -webkit-transform: translate3d(50px, 0px, 0px); 
}

And then...

 $('#mid_right a').bind('touchstart', function() {
      return $('#hero').addClass('anim');
 });

If this manifests the same problem, then it's a Webkit bug.

Edit: also, what's up with the 1ms transition?