Original post: http://chrissilich.com/blog/fix-css-animation-slow-or-choppy-in-mobile-browsers/
Even better than just adding this code to all the elements you want sped up…
Use -webkit-transform: translate3d() to do all your animations, instead of left, right, top, bottom, margin, or padding properties.
-webkit-transform: translate3d(50%, 0, 0);
Note that the values in the translate3d parentheses are x, y, z coordinates. Since -webkit-transform uses (yet another*) coordinate system, leaving a value as 0 will leave it unchanged (unless you used -webkit-transform somewhere else already).
Basically, the first example tells the browser to use the GPU to animate the element, which helps a fair bit, but the second code snippet uses the new CSS3 transform algorithms, which are WAY more efficient. The beautiful thing about it is all the modern smart phones use webkit, and therefore support -webkit-transform. My iPhone app now scrolls “like butter“!
*“Yet another” meaning you can move things relative to their point of origin with left/top, margin-left/margin-top, and now -webkit-transform;