Smooth page transitions in HTML5 with CSS3 without using jquery

I am designing a web page for mobile devices. I know jquery is awesome but I d开发者_如何学Cont want to use it. I want to achieve smooth page transitions like this http://jquerymobile.com/demos/1.0a4.1/ but without using jquery. How can I achieve that? There are web service being called between page transtitions, hence there will be delay. I want it to be as smooth as possible.

---

Face it: You're going to have to use JavaScript, and it'll be very tedious without using some framework or other. To get smooth page transitions, you have two options:

1) Run the site as a single page. That is what is used in the site you link to. The whole thing has no page transitions; it's all one page with some click events used to animate the content and load it dynamically with AJAH.

2) Run a multi page site, but using local storage. You would have a small number of pages, and cache the resources needed for them. The JavaScript would run instantly when the page was loaded, and draw a nice load screen while the ordinary content was loaded and displayed by AJAX.

Personally, I wouldn't be too concerned about page transitions; it's just how websites work. Don't be put off by jQuery either, because by the time you've written all this JavaScript you will be wanting it. Even for mobile sites, the size of the library is just about acceptably small (you can use a CDN-cached copy).