HTML5 和 CSS3 中的 iPhone 过渡和动画答案

【问题标题】：iPhone Transitions and Animations in HTML5 and CSS3HTML5 和 CSS3 中的 iPhone 过渡和动画
【发布时间】：2011-11-30 07:28:10
【问题描述】：

在不使用 jQTouch 和 jQuery Mobile 等 JavaScript 框架的情况下，有没有办法仅使用 HTML5 和 CSS3 来模仿原生 iOS 页面翻转动画和类似的过渡？

我基本上想模仿这些但没有 JavaScript： http://www.jqtouch.com/preview/demos/main/#animations（您必须在 iPhone 上查看此页面才能正确呈现）

【问题讨论】：

20thingsilearned.com 两者都没有使用，这证明了很多 ui 动画可以使用 CSS3 完成，尽管它也使用 jQuery。

标签： javascript html css

【解决方案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 许可的）并且不要忘记注明你的来源。

【讨论】：

【解决方案2】：

是的，这些东西可以通过 css 3d 转换来完成。这里有一个很好的介绍（其中包括您所追求的翻页动画的示例）：http://24ways.org/2010/intro-to-css-3d-transforms。这个东西目前没有很好的跨浏览器支持，但如果你只需要它在 iOS 上工作你应该没问题。

【讨论】：