title: CSS3 KeyFrame Translate Animation - Severe Frame Skipping in Android
body: <p>Its very surprising that a simple translate animation ( on a small rectangle ) is skipping frames on a Android 2.2 browser. Its not even 10 frames per second. The handset is Samsung Galaxy Ace ( S5830 ). There are no other animation on the image. Attached below is the code. Am I doing something wrong because I never expected such a simple translate animation to be so bad. Please suggest any workarounds for some acceptable smoothness</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;style type="text/css"&gt;
  
      #di1, #ci1 {position: absolute;left:0px;top:0px;-webkit-transform-origin: 0% 0%;}
  
  .anim1{
      -webkit-animation-duration: 5s;
      -webkit-animation-name: animation1;
      -webkit-animation-timing-function: linear;
      -webkit-animation-iteration-count:1 ;
  
  }
  
  @-webkit-keyframes animation1
  {
      0%{ -webkit-transform: translate(25px, 25px) }
      50%{ -webkit-transform: translate(200px, 00px) }
      100%{ -webkit-transform: translate(0px, 200px) }
  }
  
  &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
  
      window.addEventListener("load",win_load,false);
  
      function win_load()        
      {
          var c=document.getElementById("ci1");var ctx=c.getContext("2d");
          ctx.fillStyle="#ff0000";
          ctx.fillRect(25,25,30,30);
  
      }
  
  &lt;/script&gt;
  </code></pre>