title: jQuery Mobile transition easing on iPad
body: <p>I have a really simple set of CSS transitions that I've called 'realslide'. All it does it slide (whereas jQuery Mobile's 'slide', slides and fades). I am trying to get some easeOutCubic-like easing to work, where the animation is faster at the beginning and nestles in slowly as it finishes it's transitons.</p>
  
  <p>Matthew Lein has made an excellent website for custom CSS easing: <a href="http://matthewlein.com/ceaser/" rel="nofollow">http://matthewlein.com/ceaser/</a></p>
  
  <p>However, when I add this to jQuery Mobile, the transitions are almost non-existant and extremely laggy. This is confusing because it seems to do 3D transitions just fine.</p>
  
  <p>Does anyone know what's going on? I'm using iPad 2 / iOS 5.1, jQuery Mobile 1.1.0-RC1, PhoneGap 1.4.</p>
  
  <p>My JSFiddle: <a href="http://jsfiddle.net/4TLLc/" rel="nofollow">http://jsfiddle.net/4TLLc/</a></p>
  
  <p>My transition:</p>
  
  <pre><code>.realslide.in
  {
      -webkit-transform: translateX(0);
      -webkit-animation-name: slideinfromright;
  }
  
  .realslide.out
  {
      -webkit-transform: translateX(-100%);
      -webkit-animation-name: slideouttoleft;
  }
  
  .realslide.in.reverse
  {
      -webkit-transform: translateX(0);
      -webkit-animation-name: slideinfromleft;
  }
  
  .realslide.out.reverse
  {
      -webkit-transform: translateX(100%);
      -webkit-animation-name: slideouttoright;
  }
  
  @-webkit-keyframes slideinfromright
  {
      from { -webkit-transform: translateX(100%);}
      to { -webkit-transform: translateX(0);}
  }
  
  @-webkit-keyframes slideouttoleft
  {
      from { -webkit-transform: translateX(0);}
      to { -webkit-transform: translateX(-100%);}
  }
  
  @-webkit-keyframes slideinfromleft
  {
      from { -webkit-transform: translateX(-100%);}
      to { -webkit-transform: translateX(0);}
  }
  
  @-webkit-keyframes slideouttoright
  {
      from { -webkit-transform: translateX(0);}
      to { -webkit-transform: translateX(100%);}
  }
  </code></pre>
  
  <p>The animation that kills PhoneGap's webkit window:</p>
  
  <pre><code>.ui-page
  {
      -webkit-transition: all 750ms cubic-bezier(1.000, 1, 0.265, 1); /* older webkit */
      -webkit-transition: all 750ms cubic-bezier(1.000, 1.650, 0.265, 1.550); 
         -moz-transition: all 750ms cubic-bezier(1.000, 1.650, 0.265, 1.550); 
          -ms-transition: all 750ms cubic-bezier(1.000, 1.650, 0.265, 1.550); 
           -o-transition: all 750ms cubic-bezier(1.000, 1.650, 0.265, 1.550); 
              transition: all 750ms cubic-bezier(1.000, 1.650, 0.265, 1.550); /* custom */
  }
  </code></pre>