CODEWITHSUNDEEP
javascripthtmlcss
Alex
Alex

Reputation: 1152

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 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)

Upvotes: 1

Views: 8213

Answers (2)

Mauvis Ledford
Mauvis Ledford

Reputation: 42384

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.

Upvotes: 3

warmanp
warmanp

Reputation: 809

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.

Upvotes: 0

Related Questions