iPhone-like page transitions in HTML5

[DaveC426913]

Can I mimic iPhone page transitions using HTML5/CSS3? (This is for a stand alone app, not a website, so don't worry about usability/accessibility).

I see a lot of chatter about transitions at the element-level, can I make transitions at the page level?

Or do I have to put all my content on a single page and then use div blocks to transition between them - in essence, faking webpages?

[JAB Creations]

WebKit / Safari 3.1+

Code: Select all

* {-webkit-transition-property: background-color, background-image, border, color, opacity; -webkit-transition-duration: 0.8s;}

Presto 2.5 / Opera 10.5+

Code: Select all

* {-o-transition-property: background-color, background-image, border, color, opacity; -o-transition-duration: 0.8s;}

Gecko 1.9.3 / Firefox 3.7+

Code: Select all

* {-moz-transition-property: background-color, background-image, border, color, opacity; -moz-transition-duration: 0.8s;}