HTML5和CSS3中的iPhone過渡和動畫

Question

如果不使用jjTouch和jQuery Mobile這樣的JavaScript框架，是否有辦法僅使用HTML5和CSS3來模仿本地iOS頁面翻轉動畫和類似過渡？

我基本上想模仿這些，但是沒有JavaScript： http : //www.jqtouch.com/preview/demos/main/#animations （您必須在iPhone上查看此頁面才能正確呈現）

Answer 1

是的，只需查看jQtouch CSS文件（jqtouch.css）。

所有動畫都在此處列出。 例如：

@-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);
    }
}

然后創建動畫類：

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

拉出您需要的東西（因為它是MIT許可的），不要忘了注明您的來源。

Answer 2

是的，可以使用CSS 3D轉換完成此操作。 這里有一個很棒的介紹（其中包括您想要的翻頁動畫的示例）： http : //24ways.org/2010/intro-to-css-3d-transforms 。 這些東西目前還沒有強大的跨瀏覽器支持，但是如果您只需要在iOS上使用它就可以了。