.pt-page-moveToLeft{
-webkit-animation:moveToLeft.6s ease both;
-moz-animation:moveToLeft.6s ease both;
animation:moveToLeft.6s ease both;
}
.pt-page-moveFromLeft{
-webkit-animation:moveFromLeft.6s ease both;
-moz-animation:moveFromLeft.6s ease both;
animation:moveFromLeft.6s ease both;
}
.pt-page-moveToRight{
-webkit-animation:moveToRight.6s ease both;
-moz-animation:moveToRight.6s ease both;
animation:moveToRight.6s ease both;
}
.pt-page-moveFromRight{
-webkit-animation:moveFromRight.6s ease both;
-moz-animation:moveFromRight.6s ease both;
animation:moveFromRight.6s ease both;
}
.pt-page-moveToTop{
-webkit-animation:moveToTop.6s ease both;
-moz-animation:moveToTop.6s ease both;
animation:moveFromTop.6s ease both;
}
.pt-page-moveFromTop{
-webkit-animation:moveFromTop.6s ease both;
-moz-animation:moveFromTop.6s ease both;
animation:moveFromTop.6s ease both;
}
.pt-page-moveToBottom{
-webkit-animation:moveToBottom.6s ease both;
-moz-animation:moveToBottom.6s ease both;
animation:moveToBottom.6s ease both;
}
.pt-page-moveFromBottom{
-webkit-animation:moveFromBottom.6s ease both;
-moz-animation:moveFromBottom.6s ease both;
animation:moveFromBottom.6s ease both;
}
/*fade*/
.pt-page-fade{
-webkit-animation:fade.7s ease both;
-moz-animation:fade.7s ease both;
animation:fade.7s ease both;
}
/* move from / to and fade */
.pt-page-moveToLeftFade{
-webkit-animation:moveToLeftFade.7s ease both;
-moz-animation:moveToLeftFade.7s ease both;
animation:moveToLeftFade.7s ease both;
}
.pt-page-moveFromLeftFade{
-webkit-animation:moveFromLeftFade.7s ease both;
-moz-animation:moveFromLeftFade.7s ease both;
animation:moveFromLeftFade.7s ease both;
}
.pt-page-moveToRightFade{
-webkit-animation:moveToRightFade.7s ease both;
-moz-animation:moveToRightFade.7s ease both;
animation:moveToRightFade.7s ease both;
}
.pt-page-moveFromRightFade{
-webkit-animation:moveFromRightFade.7s ease both;
-moz-animation:moveFromRightFade.7s ease both;
animation:moveFromRightFade.7s ease both;
}
.pt-page-moveToTopFade{
-webkit-animation:moveToTopFade.7s ease both;
-moz-animation:moveToTopFade.7s ease both;
animation:moveToTopFade.7s ease both;
}
.pt-page-moveFromTopFade{
-webkit-animation:moveFromTopFade.7s ease both;
-moz-animation:moveFromToFade.7s ease both;
animation:moveFromTopFade.7s ease both;
}
.pt-page-moveToBottomFade{
-webkit-animation:moveToBottomFade.7s ease both;
-moz-animation:moveToBottomFade.7s ease both;
animation:moveFromBottomFade.7s ease both;
}
.pt-page-moveFromBottomFade{
-webkit-animation:moveFromBottomFade.7s ease both;
-moz-animation:moveFromBottomFade.7s ease both;
animation:moveFromBottomFade;
}
/* move to with different easing */
.pt-page-moveToLeftEasing{
-webkit-animation:moveToLeft.7s ease both;
-moz-animation:moveToLeft.7s ease both;
animation:moveToLeft.7s ease both;
}
.pt-page-moveToRightEasing{
-webkit-animation:moveToRight.7s ease both;
-moz-animation:moveToRight.7s ease both;
animation:moveToRight.7s ease both;
}
.pt-page-moveToTopEasing{
-webkit-animation:moveToTop.7s ease both;
-moz-animation:moveToTop.7s ease both;
animation:moveToTop.7s ease both;
}
.pt-page-moveToBottomEasing{
-webkit-animation:moveToBottom.7s ease both;
-moz-animation:moveToBottom.7s ease both;
animation:moveToBottom.7s ease both;
}
/* move from / to */
@-webkit-keyframes moveToLeft{
to{-webkit-transform:translateX(-100%);}
}
@-moz-keyframes moveToLeft{
to{-moz-transform:translateX(-100%)}
}
@keyframes moveToLeft{
to{transform:translateX(-100%)}
}
@-webkit-keyframes moveFromLeft{
to{-webkit-transform:translateX(-100%)}
}
@-moz-keyframes moveFromLeft{
to{-webkit-animation:translateX(-100%)}
}
@keyframes moveFromLeft{
to{transfrom:translateX(-100%)}
}
@-webkit-keyframes moveToRight{
to{-webkit-transfrom:translateX(100%)}
}
@-moz-keyframes moveToRight{
to{-moz-transform:translateX(100%)}
}
@keyframes moveToRight{
to{transfrom:translateX(100%)}
}
@-webkit-keyframes moveFromRight{
to{-webkit-trabsform:translateX(100%)}
}
@-moz-keyframes moveFromRight{
to{-moz-transform:translateX(100%)}
}
@keyframes moveFromRight{
to{transform:translateX(100%)}
}
@-webkit-keyframes moveToTop{
to{-webkit-transform:translateY(-100%)}
}
@-moz-keyframes moveToTop{
to{-moz-transform:translateY(-100%)}
}
@keyframes moveToTop{
to{transfrom:translateY(-100%)}
}
@-webkit-keyframes moveFromTop{
to{-webkit-transfrom:translateY(-100%)}
}
@-moz-keyframes moveFromTop{
to{-moz-transform:translateY(-100%)}
}
@keyframes moveFromTop{
to{transfrom:translateY(-100%)}
}
@-webkit-keyframes moveToBottom{
to{-webkit-transform:translateY(100%)}
}
@-moz-keyframes moveToBottom{
to{-moz-transform:translateY(100%)}
}
@keyframes moveToBottom{
to{transform:translateY(100%)}
}
@-webkit-keyframes moveFromBottom{
to{-webkit-transform:translateY(100%)}
}
@-moz-keyframes moveFromBottom{
to{-moz-transfrom:translateY(100%)}
}
@keyframes moveFromBottom{
to{transform:translateY(100%)}
}
/* fade */
@-webkit-keyframes fade{
to{opacity: 0.3}
}
@-moz-keyframes fade{
to{opacity: 0.3}
}
@keyframes fade{
to{opacity: 0.3}
}
/* move from / to and fade */
@-webkit-keyframes moveToLeftFade{
to{opacity: 0.3;-webkit-transform:tanslateX(-100%)}
}
@-moz-keyframes moveToLeftFade{
to{opacity: 0.3;-moz-transform:translateX(-100%)}
}
@keyframes moveToLeftFade{
to{opacity: 0.3;transform:translateX(-100%)}
}
@-webkit-keyframes moveFromLeftFade{
to{opaity:0.3;-webkit-transform:translateX(-100%)}
}
@-moz-keyframes moveFromLeftFade{
to{opacity: 0.3;-moz-transform:translateX(-100%)}
}
@keyframes moveFromLeftFade{
to{opacity:0.3 ;transform:translateX(-100%)}
}
@-webkit-keyframes moveToRightFade{
to{opacity: 0.3;-webkit-transform:translateX(100%)}
}
@-moz-keyframes moveToRightFade{
to{opacity:0.3;-moz-transform:translateX(100%)}
}
@keyframes moveToRightFade{
to{opacity: 0.3;transform:translateX(100%)}
}
@-webkit-keyframes moveFromRightFade{
to{opacity:0.3;-webkit-transform:translateX(100%) }
}
@-moz-keyframes moveFromRightFade{
to{opacity: 0.3;-moz-transform:translate(100%)}
}
@keyframes moveFromRightFade{
to{opacity: 0.3;transform:translateX(100%)}
}
@-webkit-keyframes moveToTopFade{
to{opacity: 0.3;-webkit-transform:translateY(-100%)}
}
@-moz-keyframes moveToTopFade{
to{opacity: 0.3;-moz-transform:translateY(-100%)}
}
@keyframes moveToTopFade{
to{opacity: 0.3;transform:translateY(-100%)}
}
@-webkit-keyframes moveFromTopFade{
to{opacity: 0.3;-webkit-transform:translateY(-100%)}
}
@-moz-keyframes moveFromTopFade{
to{opacity: 0.3;-moz-transform:translateY(100%)}
}
@keyframes moveFromTopFade{
to{opacity: 0.3;transform:translateY(100%)}
}
@-webkit-keyframes moveToBottomFade{
to{opacity: 0.3;-webkit-transform:translateY(100%)}
}
@-moz-keyframes moveToBottomFade{
to{opacity: 0.3;-moz-transform:translateY(100%)}
}
@keyframes moveToBottomFade{
to{opacity: 0.3;transform:translateY(100%)}
}
/* scale and fade */
.pt-page-scaleDown{
-webkit-animation:scaleDown.7s ease both;
-moz-animation:scaleDown.7s ease both;
animation:scaleDown.7s ease both;
}
.pt-page-scaleUp{
-webkit-animation:scaleUp.7s ease both;
-moz-animation:scaleUp.7s ease both;
animation:scaleUp.7s ease both;
}
.pt-page-scaleDownUp{
-webkit-animation:scaleDownUp.7s ease both;
-moz-animation:scaleDownUp.7s ease both;
animation:scaleDownUp.7s ease both;
}
.pt-page-scaleUpDown{
-webkit-animation:scaleUpDown.7s ease both;
-moz-animation:scaleUpDown.7s ease both;
animation:scaleUpDown.7s ease both;
}
.pt-page-scaleDownCenter{
-webkit-animation:scaleDownCenter.7s ease both;
-moz-animation:scaleDownCenter.7s ease both;
animation:scaleDownCenter.7s ease both;
}
.pt-page-scaleUpCenter{
-webkit-animation:scaleUpCenter.7s ease both;
-moz-animation:scaleUpCenter.7s ease both;
animation:scaleDownCenter.7s ease both;
}
/*以上是2016-1-19的代码*/
原文：http://www.cnblogs.com/whatcanido/p/5143800.html