Proper way to optimize CSS 3 animations for iOS/Mobile Safari?

Question

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 hard

Answer 1

You should at minimum add an empty translate3d declaration:

transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);

This will help performance immensely on iOS, as demonstrated by Remy Sharp, because it causes iOS to use hardware-acceleration.

If you want to go further, refactor the animation to use a webkit translation transform, rather than animating the 'top' property. In the transform3d property, the second parameter is the Y value. In your example, change the -webkit-transition to focus on the transform property, rather than top. Then, set an initial webkit-transform of translate3d(0,0,0).

To perform your animation, change your class .modal.modalOn declaration to:

transform: translate3d(0,80px,0);
-webkit-transform: translate3d(0,80px,0)

This will cause iOS to animate the transform of the element, and should be even smoother, than the first method.

-- Note -- Don't forget to add a unit of measurement like px or em — something like transform: translate3d(0,80,0); won't work.