在iPhone Web开发中 Safari 一些页面切换 和 模块切换 的效果样式其实也就是WEBKIT公布出来的一些接口,不管是Android还是iPhone 还是联通iPhone都是基于WebKit的,如果用javascript开发的话,估计Safari吃不消,毕竟内存是有限的。之前开发过一个软件模式 的iPhone Web,头尾固定,中间内容部分是手刷滚动的,也就是内容溢出出现的滚动条。这个也只能用javascript开发,在iPhone模拟器中由于内存足够 大,所以非常的顺畅几乎和软件的一样顺畅,但是放到真机内测试的时候难免会出现迟钝的现象。
下面贴出基于WebKit的效果样式
调用方法也就是普通的样式调用。一个显示一个隐藏。在PC机的Safari上不会太流畅,在真机或者模拟器内效果非常好。
.reveal.in
{
z-index
:
0
;
-webkit-animation-name
:
dontmove
;
}
.reveal.out { z-index : 10 ; -webkit-animation-name : revealout ; }
.reveal.out.reverse { z-index : 0 ; -webkit-animation-name : dontmove ; }
.reveal.in.reverse { z-index : 10 ; -webkit-animation-name : revealin ; }
.pageflip { -webkit-transform-origin : 0 50% ; -webkit-animation-duration : .5s ; }
.pageflip.in { z-index : 0 ; -webkit-animation-name : dontmove ; }
.pageflip.out { z-index : 10 ; -webkit-animation-name : pageflipout ; }
.pageflip.out.reverse { z-index : 0 ; -webkit-animation-name : dontmove ; }
.pageflip.in.reverse { z-index : 10 ; -webkit-animation-name : pageflipin ; }
.in, .out { -webkit-animation-timing-function : ease-in-out ; -webkit-animation-duration : 350ms ; }
.slide.in { -webkit-animation-name : slideinfromright ; }
.slide.out { -webkit-animation-name : slideouttoleft ; }
.slide.in.reverse { -webkit-animation-name : slideinfromleft ; }
.slide.out.reverse { -webkit-animation-name : slideouttoright ; }
.fade.in { z-index : 10 ; -webkit-animation-name : fadein ; }
.fade.out { z-index : 0 ; -webkit-animation-name : fadeout ; }
.dissolve.in { -webkit-animation-name : fadein ; }
.dissolve.out { -webkit-animation-name : fadeout ; }
.flip { -webkit-animation-duration : .65s ; }
.flip.in { -webkit-animation-name : flipinfromleft ; }
.flip.out { -webkit-animation-name : flipouttoleft ; }
.flip.in.reverse { -webkit-animation-name : flipinfromright ; }
.flip.out.reverse { -webkit-animation-name : flipouttoright ; }
.slideup.in { z-index : 10 ; -webkit-animation-name : slideup ; }
.slideup.out { z-index : 0 ; -webkit-animation-name : dontmove ; }
.slideup.out.reverse { z-index : 10 ; -webkit-animation-name : slidedown ; }
.slideup.in.reverse { z-index : 0 ; -webkit-animation-name : dontmove ; }
.swap { -webkit-transform : perspective(800) ; -webkit-animation-duration : .7s ; }
.swap.out { -webkit-animation-name : swapouttoleft ; }
.swap.in { -webkit-animation-name : swapinfromright ; }
.swap.out.reverse { -webkit-animation-name : swapouttoright ; }
.swap.in.reverse { -webkit-animation-name : swapinfromleft ; }
.cube { -webkit-animation-duration : .55s ; }
.cube.in { -webkit-animation-name : cubeinfromright ; -webkit-transform-origin : 0% 50% ; }
.cube.out { -webkit-animation-name : cubeouttoleft ; -webkit-transform-origin : 100% 50% ; }
.cube.in.reverse { -webkit-animation-name : cubeinfromleft ; -webkit-transform-origin : 100% 50% ; }
.cube.out.reverse { -webkit-animation-name : cubeouttoright ; -webkit-transform-origin : 0% 50% ; }
.pop { -webkit-transform-origin : 50% 50% ; }
.pop.in { z-index : 10 ; -webkit-animation-name : popin ; }
.pop.out { z-index : 10 ; -webkit-animation-name : popout ; }
.pop.out.reverse { z-index : 10 ; -webkit-animation-name : popout ; }
.pop.in.reverse { z-index : 0 ; -webkit-animation-name : popin ; }
@-webkit-keyframes revealin { from { -webkit-transform : translateX(100%) ; } to { -webkit-transform : translateX(0) ; } }
@-webkit-keyframes revealout { from { -webkit-transform : translateX(0) ; } to { -webkit-transform : translateX(100%) ; } }
@-webkit-keyframes pageflipin { from { -webkit-transform : rotateY(-90deg) } to { -webkit-transform : rotateY(0) ; } }
@-webkit-keyframes pageflipout { from { -webkit-transform : rotateY(0) ; } to { -webkit-transform : rotateY(-90deg) ; } }
@-webkit-keyframes slideinfromright { from { -webkit-transform : translateX(100%) ; } to { -webkit-transform : translateX(0) ; } }
@-webkit-keyframes slideinfromleft { from { -webkit-transform : translateX(-100%) ; } to { -webkit-transform : translateX(0) ; } }
@-webkit-keyframes slideouttoleft { from { -webkit-transform : translateX(0) ; } to { -webkit-transform : translateX(-100%) ; } }
@-webkit-keyframes slideouttoright { from { -webkit-transform : translateX(0) ; } to { -webkit-transform : translateX(100%) ; } }
@-webkit-keyframes fadein { from { opacity : 0 ; } to { opacity : 1 ; } }
@-webkit-keyframes fadeout { from { opacity : 1 ; } to { opacity : 0 ; } }
@-webkit-keyframes flipinfromright { from { -webkit-transform : rotateY(-180deg) scale(.8) ; } to { -webkit-transform : rotateY(0) scale(1) ; } }
@-webkit-keyframes flipinfromleft { from { -webkit-transform : rotateY(180deg) scale(.8) ; } to { -webkit-transform : rotateY(0) scale(1) ; } }
@-webkit-keyframes flipouttoleft { from { -webkit-transform : rotateY(0) scale(1) ; } to { -webkit-transform : rotateY(-180deg) scale(.8) ; } }
@-webkit-keyframes flipouttoright { from { -webkit-transform : rotateY(0) scale(1) ; } to { -webkit-transform : rotateY(180deg) scale(.8) ; } }
@-webkit-keyframes slideup { from { -webkit-transform : translateY(100%) ; } to { -webkit-transform : translateY(0) ; } }
@-webkit-keyframes slidedown { from { -webkit-transform : translateY(0) ; } to { -webkit-transform : translateY(100%) ; } }
@-webkit-keyframes dontmove { from { opacity : 1 ; } to { opacity : 1 ; } }
@-webkit-keyframes cubeinfromleft { from {-webkit-transform : rotateY(-90deg) translateZ(320px) ; opacity : .5 ; } to { -webkit-transform : rotateY(0deg) translateZ(0) ; opacity : 1 ; } }
@-webkit-keyframes cubeouttoright { from {-webkit-transform : rotateY(0deg) translateX(0) ; opacity : 1 ; } to { -webkit-transform : rotateY(90deg) translateZ(320px) ; opacity : .5 ; } }
@-webkit-keyframes cubeinfromright { from {-webkit-transform : rotateY(90deg) translateZ(320px) ; opacity : .5 ; } to { -webkit-transform : rotateY(0deg) translateZ(0) ; opacity : 1 ; } }
@-webkit-keyframes cubeouttoleft { from {-webkit-transform : rotateY(0deg) translateZ(0) ; opacity : 1 ; } to { -webkit-transform : rotateY(-90deg) translateZ(320px) ; opacity : .5 ; } }
@-webkit-keyframes popin { from {-webkit-transform : scale(.2) ; opacity : 0 ; } to { -webkit-transform : scale(1) ; opacity : 1 ; } }
@-webkit-keyframes popout { from {-webkit-transform : scale(1) ; opacity : 1 ; } to { -webkit-transform : scale(.2) ; opacity : 0 ; } }
@-webkit-keyframes swapouttoright {
0% {-webkit-transform : translate3d(0px, 0px, 0px) rotateY(0deg) ; -webkit-animation-timing-function : ease-in-out ; }
50% { -webkit-transform : translate3d(-180px, 0px, -400px) rotateY(20deg) ; -webkit-animation-timing-function : ease-in ; }
100% { -webkit-transform : translate3d(0px, 0px, -800px) rotateY(70deg) ; }
}
@-webkit-keyframes swapouttoleft {
0% {-webkit-transform : translate3d(0px, 0px, 0px) rotateY(0deg) ; -webkit-animation-timing-function : ease-in-out ; }
50% { -webkit-transform : translate3d(180px, 0px, -400px) rotateY(-20deg) ; -webkit-animation-timing-function : ease-in ; }
100% { -webkit-transform : translate3d(0px, 0px, -800px) rotateY(-70deg) ; }
}
@-webkit-keyframes swapinfromright {
0% {-webkit-transform : translate3d(0px, 0px, -800px) rotateY(70deg) ; -webkit-animation-timing-function : ease-out ; }
50% { -webkit-transform : translate3d(-180px, 0px, -400px) rotateY(20deg) ; -webkit-animation-timing-function : ease-in-out ; }
100% { -webkit-transform : translate3d(0px, 0px, 0px) rotateY(0deg) ; }
}
@-webkit-keyframes swapinfromleft {
0% {-webkit-transform : translate3d(0px, 0px, -800px) rotateY(-70deg) ; -webkit-animation-timing-function : ease-out ; }
50% { -webkit-transform : translate3d(180px, 0px, -400px) rotateY(-20deg) ; -webkit-animation-timing-function : ease-in-out ; }
100% { -webkit-transform : translate3d(0px, 0px, 0px) rotateY(0deg) ; }
}
.reveal.out { z-index : 10 ; -webkit-animation-name : revealout ; }
.reveal.out.reverse { z-index : 0 ; -webkit-animation-name : dontmove ; }
.reveal.in.reverse { z-index : 10 ; -webkit-animation-name : revealin ; }
.pageflip { -webkit-transform-origin : 0 50% ; -webkit-animation-duration : .5s ; }
.pageflip.in { z-index : 0 ; -webkit-animation-name : dontmove ; }
.pageflip.out { z-index : 10 ; -webkit-animation-name : pageflipout ; }
.pageflip.out.reverse { z-index : 0 ; -webkit-animation-name : dontmove ; }
.pageflip.in.reverse { z-index : 10 ; -webkit-animation-name : pageflipin ; }
.in, .out { -webkit-animation-timing-function : ease-in-out ; -webkit-animation-duration : 350ms ; }
.slide.in { -webkit-animation-name : slideinfromright ; }
.slide.out { -webkit-animation-name : slideouttoleft ; }
.slide.in.reverse { -webkit-animation-name : slideinfromleft ; }
.slide.out.reverse { -webkit-animation-name : slideouttoright ; }
.fade.in { z-index : 10 ; -webkit-animation-name : fadein ; }
.fade.out { z-index : 0 ; -webkit-animation-name : fadeout ; }
.dissolve.in { -webkit-animation-name : fadein ; }
.dissolve.out { -webkit-animation-name : fadeout ; }
.flip { -webkit-animation-duration : .65s ; }
.flip.in { -webkit-animation-name : flipinfromleft ; }
.flip.out { -webkit-animation-name : flipouttoleft ; }
.flip.in.reverse { -webkit-animation-name : flipinfromright ; }
.flip.out.reverse { -webkit-animation-name : flipouttoright ; }
.slideup.in { z-index : 10 ; -webkit-animation-name : slideup ; }
.slideup.out { z-index : 0 ; -webkit-animation-name : dontmove ; }
.slideup.out.reverse { z-index : 10 ; -webkit-animation-name : slidedown ; }
.slideup.in.reverse { z-index : 0 ; -webkit-animation-name : dontmove ; }
.swap { -webkit-transform : perspective(800) ; -webkit-animation-duration : .7s ; }
.swap.out { -webkit-animation-name : swapouttoleft ; }
.swap.in { -webkit-animation-name : swapinfromright ; }
.swap.out.reverse { -webkit-animation-name : swapouttoright ; }
.swap.in.reverse { -webkit-animation-name : swapinfromleft ; }
.cube { -webkit-animation-duration : .55s ; }
.cube.in { -webkit-animation-name : cubeinfromright ; -webkit-transform-origin : 0% 50% ; }
.cube.out { -webkit-animation-name : cubeouttoleft ; -webkit-transform-origin : 100% 50% ; }
.cube.in.reverse { -webkit-animation-name : cubeinfromleft ; -webkit-transform-origin : 100% 50% ; }
.cube.out.reverse { -webkit-animation-name : cubeouttoright ; -webkit-transform-origin : 0% 50% ; }
.pop { -webkit-transform-origin : 50% 50% ; }
.pop.in { z-index : 10 ; -webkit-animation-name : popin ; }
.pop.out { z-index : 10 ; -webkit-animation-name : popout ; }
.pop.out.reverse { z-index : 10 ; -webkit-animation-name : popout ; }
.pop.in.reverse { z-index : 0 ; -webkit-animation-name : popin ; }
@-webkit-keyframes revealin { from { -webkit-transform : translateX(100%) ; } to { -webkit-transform : translateX(0) ; } }
@-webkit-keyframes revealout { from { -webkit-transform : translateX(0) ; } to { -webkit-transform : translateX(100%) ; } }
@-webkit-keyframes pageflipin { from { -webkit-transform : rotateY(-90deg) } to { -webkit-transform : rotateY(0) ; } }
@-webkit-keyframes pageflipout { from { -webkit-transform : rotateY(0) ; } to { -webkit-transform : rotateY(-90deg) ; } }
@-webkit-keyframes slideinfromright { from { -webkit-transform : translateX(100%) ; } to { -webkit-transform : translateX(0) ; } }
@-webkit-keyframes slideinfromleft { from { -webkit-transform : translateX(-100%) ; } to { -webkit-transform : translateX(0) ; } }
@-webkit-keyframes slideouttoleft { from { -webkit-transform : translateX(0) ; } to { -webkit-transform : translateX(-100%) ; } }
@-webkit-keyframes slideouttoright { from { -webkit-transform : translateX(0) ; } to { -webkit-transform : translateX(100%) ; } }
@-webkit-keyframes fadein { from { opacity : 0 ; } to { opacity : 1 ; } }
@-webkit-keyframes fadeout { from { opacity : 1 ; } to { opacity : 0 ; } }
@-webkit-keyframes flipinfromright { from { -webkit-transform : rotateY(-180deg) scale(.8) ; } to { -webkit-transform : rotateY(0) scale(1) ; } }
@-webkit-keyframes flipinfromleft { from { -webkit-transform : rotateY(180deg) scale(.8) ; } to { -webkit-transform : rotateY(0) scale(1) ; } }
@-webkit-keyframes flipouttoleft { from { -webkit-transform : rotateY(0) scale(1) ; } to { -webkit-transform : rotateY(-180deg) scale(.8) ; } }
@-webkit-keyframes flipouttoright { from { -webkit-transform : rotateY(0) scale(1) ; } to { -webkit-transform : rotateY(180deg) scale(.8) ; } }
@-webkit-keyframes slideup { from { -webkit-transform : translateY(100%) ; } to { -webkit-transform : translateY(0) ; } }
@-webkit-keyframes slidedown { from { -webkit-transform : translateY(0) ; } to { -webkit-transform : translateY(100%) ; } }
@-webkit-keyframes dontmove { from { opacity : 1 ; } to { opacity : 1 ; } }
@-webkit-keyframes cubeinfromleft { from {-webkit-transform : rotateY(-90deg) translateZ(320px) ; opacity : .5 ; } to { -webkit-transform : rotateY(0deg) translateZ(0) ; opacity : 1 ; } }
@-webkit-keyframes cubeouttoright { from {-webkit-transform : rotateY(0deg) translateX(0) ; opacity : 1 ; } to { -webkit-transform : rotateY(90deg) translateZ(320px) ; opacity : .5 ; } }
@-webkit-keyframes cubeinfromright { from {-webkit-transform : rotateY(90deg) translateZ(320px) ; opacity : .5 ; } to { -webkit-transform : rotateY(0deg) translateZ(0) ; opacity : 1 ; } }
@-webkit-keyframes cubeouttoleft { from {-webkit-transform : rotateY(0deg) translateZ(0) ; opacity : 1 ; } to { -webkit-transform : rotateY(-90deg) translateZ(320px) ; opacity : .5 ; } }
@-webkit-keyframes popin { from {-webkit-transform : scale(.2) ; opacity : 0 ; } to { -webkit-transform : scale(1) ; opacity : 1 ; } }
@-webkit-keyframes popout { from {-webkit-transform : scale(1) ; opacity : 1 ; } to { -webkit-transform : scale(.2) ; opacity : 0 ; } }
@-webkit-keyframes swapouttoright {
0% {-webkit-transform : translate3d(0px, 0px, 0px) rotateY(0deg) ; -webkit-animation-timing-function : ease-in-out ; }
50% { -webkit-transform : translate3d(-180px, 0px, -400px) rotateY(20deg) ; -webkit-animation-timing-function : ease-in ; }
100% { -webkit-transform : translate3d(0px, 0px, -800px) rotateY(70deg) ; }
}
@-webkit-keyframes swapouttoleft {
0% {-webkit-transform : translate3d(0px, 0px, 0px) rotateY(0deg) ; -webkit-animation-timing-function : ease-in-out ; }
50% { -webkit-transform : translate3d(180px, 0px, -400px) rotateY(-20deg) ; -webkit-animation-timing-function : ease-in ; }
100% { -webkit-transform : translate3d(0px, 0px, -800px) rotateY(-70deg) ; }
}
@-webkit-keyframes swapinfromright {
0% {-webkit-transform : translate3d(0px, 0px, -800px) rotateY(70deg) ; -webkit-animation-timing-function : ease-out ; }
50% { -webkit-transform : translate3d(-180px, 0px, -400px) rotateY(20deg) ; -webkit-animation-timing-function : ease-in-out ; }
100% { -webkit-transform : translate3d(0px, 0px, 0px) rotateY(0deg) ; }
}
@-webkit-keyframes swapinfromleft {
0% {-webkit-transform : translate3d(0px, 0px, -800px) rotateY(-70deg) ; -webkit-animation-timing-function : ease-out ; }
50% { -webkit-transform : translate3d(180px, 0px, -400px) rotateY(-20deg) ; -webkit-animation-timing-function : ease-in-out ; }
100% { -webkit-transform : translate3d(0px, 0px, 0px) rotateY(0deg) ; }
}