[英]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? 如果不使用jjTouch和jQuery Mobile这样的JavaScript框架,是否有办法仅使用HTML5和CSS3来模仿本地iOS页面翻转动画和类似过渡?
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) 我基本上想模仿这些,但是没有JavaScript: http : //www.jqtouch.com/preview/demos/main/#animations (您必须在iPhone上查看此页面才能正确呈现)
Yes, just look at the jQtouch CSS file (jqtouch.css). 是的,只需查看jQtouch CSS文件(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. 拉出您需要的东西(因为它是MIT许可的),不要忘了注明您的来源。
Yep this stuff can be done with css 3d transforms. 是的,可以使用CSS 3D转换完成此操作。 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 . 这里有一个很棒的介绍(其中包括您想要的翻页动画的示例): 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. 这些东西目前还没有强大的跨浏览器支持,但是如果您只需要在iOS上使用它就可以了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.