iPhone Transitions and Animations in HTML5 and CSS3

Without using a JavaScript framework like jQTouch and jQuery Mobile, is there a way to mimic the native iOS page flip animati开发者_JAVA技巧on 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)

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.

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.