iPhone Transitions and Animations in HTML5 and CSS3

1
votes

Without using a JavaScript framework like jQTouch and jQuery Mobile, is there a way to mimic the native iOS page flip animation and similar transitions using only HTML5 and CSS3?

I basically want to mimic these but without JavaScript: http://www.jqtouch.com/preview/demos/main/#animations (you must view this page on an iPhone for it to render properly)

2
javascripthtmlcss
20thingsilearned.com is using neither and testament that a lot of ui animation can be done using CSS3, though it also uses jQuery. - hlfcoding

2 Answers

3
votes

Yes, just look at the jQtouch CSS file (jqtouch.css).

All the animations are listed there. For example:

@-webkit-keyframes flipRightIn {
    0% {
        -webkit-transform: rotateY(-180deg) scale(.8);
    }
    100% {
        -webkit-transform: rotateY(0deg) scale(1);
    }
}

@-webkit-keyframes flipRightOut {
    0% {
        -webkit-transform: rotateY(0deg) scale(1);
    }
    100% {
        -webkit-transform: rotateY(180deg) scale(.8);
    }
}

Then create the animation class:

.flipright.in {
    -webkit-animation-name: flipRightIn;
}

Pull what you need (since it's MIT licensed) and don't forget to attribute your source.

0
votes

Yep this stuff can be done with css 3d transforms. There's a great introduction (which includes an example of the page flip animation you're after) here: http://24ways.org/2010/intro-to-css-3d-transforms. This stuff doesn't have great cross-browser support at the moment, but if you only need it to work on iOS you should be fine.