As you navigate between the pages of your app, the jQuery Mobile framework uses CSS3 animations to show some cool transition effects. The fade transition is used by default for pages, and the pop transition is used for dialogs. You can navigate into a page with a particular transition, and when you navigate out of the page, you can reverse the direction of the transition. jQuery Mobile comes with a default set of 10 transitions as of v1.1.1. The jQuery Mobile online docs has a nice online demo showing all the available transitions. But that's not all; you can use CSS to create your own custom transitions and use them in your app. This recipe shows you how to use CSS and create a bouncing page effect during page transitions.
Copy the full code of this recipe from the code/02/custom-css-transition
sources folder. You can launch this code using the URL http://localhost:8080/02/custom-css-transition/main.html
.