title: Animation in HTML without lag
body: <p>I am trying to create a spinning animation using <code>HTML</code> and <code>jQuery</code>.</p>
  
  <p>I have tried two different ways:</p>
  
  <p>1) Wrote my custom animation function to make the animation happen.</p>
  
  <pre><code>    $(window).load(function() 
      {
          $(".vfx_1").css({width:'550px', height:'400px', position:'absolute', top: '250px', left: '150px'});
  
          //40 milliseconds for 1 frame
          //always put the width, height, and position of the vfx and rushers to the first array
          //multipliers for background image from left, top, interval, visibility flag(false by default, true for hidden), absolute top, absolute left,
          //width, height
  
          var vfx_1_anim = [[0,0,40,false,0,0,550,400],[0,1,40,false],[0,2,40,false],[0,3,40,false],[0,4,40,false],[0,5,40,false],[0,6,40,false],[0,7,40,false],[0,8,40,false],[0,9,40,false],[1,0,40,false],[1,1,40,false],[1,2,40,false],[1,3,40,false],[1,4,40,false],[1,5,40,false],[1,6,40,false],[1,7,40,false],[1,8,40,false],[1,9,40,false],[2,0,40,false],[2,1,40,false],[2,2,40,false],[2,3,40,false],[2,4,40,false],[2,5,40,false],[2,6,40,false],[2,7,40,false],[2,8,40,false],[2,9,40,false]];
  
          //_animate('.blitzbot', 'timeout.png', blitz_anim);
          _animate('.bottom_rotator', 'bottomTurning.png', vfx_1_anim);
  
          function _animate(class_name, bg, anim, hide)
          {
              var hide = (typeof anim[0][3] === "undefined") ? false : anim[0][3];
  
              if(hide) $(class_name).css("visibility", "hidden");
              else $(class_name).css("visibility", "visible");
  
              $(class_name).css({background:"url("+ bg +") "+ (-anim[0][0] * $(class_name).width()) + "px "+ (-anim[0][1] * $(class_name).height())  +"px"});
              if(typeof anim[0][4] != "undefined") $(class_name).css("top", anim[0][4]);
              if(typeof anim[0][5] != "undefined") $(class_name).css("left", anim[0][5]);
              if(typeof anim[0][6] != "undefined") $(class_name).css("width", anim[0][6]);
              if(typeof anim[0][7] != "undefined") $(class_name).css("height", anim[0][7]);
              anim.splice(0,1);
  
              if(anim.length&gt;0)
              {
                  setTimeout(function() 
                  {
                      _animate(class_name, bg, anim);
                  }, anim[0][2]);
              }   
          }
      });
  </code></pre>
  
  <p>2.<a href="http://spritely.net/" rel="nofollow">SPRITELY</a></p>
  
  <p>In both the cases , my animation runs pathetically slow. In the <code>vfx_1_anim</code> , I have gone  only upto 30 frames but actually , there are 100 frames. The size of the png sequence image is around 55000 x 400 for the <code>spritely</code> code and around 5500x4000 for the custom animation code.</p>
  
  <p>I couldn't create a fiddle because I couldn't find a free image hosting site to which I can upload images and not get them scaled down automatically.</p>
  
  <p><strong>My Question</strong> : How do I create an animation which doesn't suffer due to the large image size and number of frames. Would canvas be a good option ? Link to the image which I am using for spritely animation.</p>
  
  <p><a href="http://fc04.deviantart.net/fs71/f/2013/202/5/e/bottom_turning_1_by_skyrbe-d6ehlac.png" rel="nofollow">IMAGE</a></p>
  
  <p>Thanks!</p>