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.
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:
.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; }
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?
Safari supports two types of CSS animation: transition animations and keyframe animations.
TL;DR # Take care that your animations don't cause performance issues; ensure that you know the impact of animating a given CSS property. Animating properties that change the geometry of the page (layout) or cause painting are particularly expensive. Where you can, stick to changing transforms and opacity.
CSS has fairly good performance as it offloads animation logic onto the browser itself. This lets the browser optimize DOM interaction and memory consumption and most importantly, uses the GPU to improve performance. On the other hand, Javascript performance can range from reasonably faster to much slower than CSS.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With