css3 动画

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

}