iPhone Safari 开发中的一些特效样式

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