title: Proper way to optimize CSS 3 animations for iOS/Mobile Safari?
body: <p>I'm building an iPad app using PhoneGap. I'm trying to use CSS transformations for the animation, but I'm not entirely sure I'm using the proper methods to leverage any hardware acceleration the device might support. </p>
  
  <p>It's a modal window (DIV) that I want to slide down from the top of the page. It'd start positioned off the top of the screen, then animated into the page itself via adding a class via jquery:</p>
  
  <pre><code>.modal {
        background: url('../images/bgnd-modal.png');
        width: 800px;
        height: 568px;
        position: absolute; 
        top: -618px;
        left: 100px;
        z-index: 1001;
        -webkit-transition: top .25s ease-in; 
    }
  .modal.modalOn {
        top: 80px;
    }
  </code></pre>
  
  <p>When deployed onto the iPad 2 with iOS 4, this works, but the animation is slightly jerky. It's not an entirely smooth animation. Should I be using different CSS to handle this? Or is this perhaps just a side-effect of it being a PhoneGap app and the DIV in question having a large background image? </p>