How can I give an HTML 5 banner a transition animation on iOS?

Question

I'm implementing an app demo that after a prompt (where it calls back to the server) displays an HTML5 banner at the top of the screen. However, I can't figure out how I can animate the HTML5 banner to transition vertically onto the screen from the top.

The type of transition animation I'm talking about is here http://www.youtube.com/watch?v=xCkg3llsxZI&t=0m8s - although the animation I need is a simple vertical transition without the 3D effect that native iOS push notifications have.

Thanks for any help!

Answer 1

use CSS3 transforms/transitions. This is a lot faster and better than using javascript or a JS library such as jQuery. see here

If you want more detailed animations, use CSS3 animations. see here

And most importantly, to ensure full cross-plat support of CSS3, install Modernizr and run some shims. see here

EDIT: If you want to trigger the above CSS3 with iOS touch gestures functions, then define those styles inside of the functions.