HTML and CSS Reference
Interactions and Transitions
Take a look at three of the most common user-interaction approaches when developing
a mobile web app: slide, flip, and rotation effects. First, we'll dissect the slide, flip, and
rotation transitions and how they're accelerated. Notice how each animation requires
frameworks, only DOM and vendor prefixed APIs.
You can view this code in action at http://html5e.org/example . The demo
is built for a mobile device, so fire up an emulator, use your phone or
tablet, or reduce the size of your browser window to 1024px or less.
The most common of the three approaches, sliding page transitions, mimics the native
feel of mobile applications. The slide transition is invoked to bring a new content area
into the view port.
For the slide effect, first you declare your markup:
<div id= "home-page"
class= "page" >
<h1> Home Page </h1>
<div id= "products-page" class= "page stage-right" >
<h1> Products Page </h1>
<div id= "about-page" class= "page stage-left" >
<h1> About Page </h1>
Notice that the pages are staged left and right. You could place them in any direction,
but this is most common.
We now add animation plus hardware acceleration with just a few lines of CSS. The
actual animation happens when we swap classes on the page div elements.
position : absolute ;
width : 100 % ;
height : 100 % ;
/*activate the GPU for compositing each page */
- webkit - transform : translate3d ( 0 , 0 , 0 );