HTML and CSS Reference
In-Depth Information
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
only three or four lines of CSS and JavaScript. The examples don't use any additional
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.
Sliding
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>
<div
id=
"products-page"
class=
"page stage-right"
>
<h1>
Products Page
</h1>
</div>
<div
id=
"about-page"
class=
"page stage-left"
>
<h1>
About Page
</h1>
</div>
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.
.page
{
position
:
absolute
;
width
:
100
%
;
height
:
100
%
;
/*activate the GPU for compositing each page */
-
webkit
-
transform
:
translate3d
(
0
,
0
,
0
);
}
