2016/1/20

/*以下是2016-1-20的代码*/
@-webkit-keyframes scaleDown{
to{opacity: 0;-webkit-transform:scale(.8)}
}
@-moz-keyframes scaleDown{
to{opacity: 0;-moz-transform:scale(.8)}
}
@keyframes scaleDown{
to{opacity: 0;transform:scale(.8)}
}

@-webkit-keyframes scaleUp{
to{opacity: 0;-webkit-transform:scale(.8)}
}
@-moz-keyframes scaleUp{
to{opacity: 0;-moz-tranform:scale(.8)}
}
@keyframes scaleUp{
to{opacity: 0;transform:scale(.8)}
}

@-webkit-keyframes scaleDownUp{
to{opacity: 0;-webkit-transform:scale(1.2)}
}
@-moz-keyframes scaleDownUp{
to{opacity: 0;-moz-transform:scale(1.2)}
}
@keyframes scaleDownUp{
to{opacity: 0;transform:scale(1.2)}
}

@-webkit-keyframes scaleUpDown{
to{opacity: 0;-webkit-transform:scale(1.2)}
}
@-moz-keyframes scaleUpDown{
to{opacity: 0;-moz-transform:scale(1.2)}
}
@keyframes scaleUpDown{
to{opacity: 0;transform:scale(1.2)}
}

@-webkit-keyframes scaleDownCenter{
to{opacity: 0;-webkit-transform:scale(1.2)}
}
@-moz-keyframes scaleDownCenter{
to{opacity: 0;-moz-transform:scale(1.2)}
}
@keyframes scaleDownCenter{
to{opacity:0;transform:scale(1.2)}
}

@-webkit-keyframes scaleUpCenter{
to{opacity: 0;-webkit-transform:scale(1.2)}
}
@-moz-keyframes scaleUpCenter{
to{opacity: 0;-moz-transform:scale(1.2)}
}
@keyframes scaleUpCenter{
to{opacity: 0;transform:scale(1.2)}
}

/* rotate sides first and scale */
.pt-page-rotateRightSideFirst{
-webkit-transform-origin:0% 50%;
-webkit-animation:rotateRightSideFirst.8s both ease-in;
-moz-transform-origin:0% 50%;
-moz-animation:rotateRightSideFirst.8s both ease-in;
transform-origin:0% 50%;
animation:rotateRightSideFirst.8s both ease-in;
}
.pt-page-rotateLeftSideFirst{
-webkit-transform-origin:100% 50%;
-webkit-animation:rotateLeftSideFirst.8s both ease-in;
-moz-transform-origin:100% 50%;
-moz-animation:rotateLeftSideFirst.8s both ease-in;
transform-origin:100% 50%;
animation:rotateRightFirst.8s both ease-in;
}
.pt-page-rotateTopSideFirst{
-webkit-transform-origin:50% 100%;
-webkit-animation:rotateTopSideFirst.8s both ease-in;
-moz-transform-origin:50% 100%;
-moz-animation:rotateTopSideFirst.8s both ease-in;
transform-origin:50% 100%;
animation:rotateRightSideFirst.8s both ease-in;
}
.pt-page-rotateBottomSideFirst{
-webkit-transform-origin:50% 0%;
-webkit-animation:rotateBottomSideFirst.8s both ease-in;
-moz-transform-origin:50% 0%;
-moz-animation:rotateBottomSideFirst.8s both ease-in;
transform-origin:50% 0%;
animaton:rotateRightSideFirst.8s both ease-in;
}

/* flip */
.pt-page-flipOutLeft{
-webkit-transform-origin:50% 50%;
-webkit-origin:flipOutLeft.5s both ease-in;
-moz-transform-origin:50% 50%;
-moz-animation:flipOutLeft.5s both ease-in;
transform-origin:50% 50%;
animation:flipOutLeft.8s both ease-in;
}
.pt-page-flipInLeft{
-webkit-transform-origin:50% 50%;
-webkit-animation:flipInLeft.5s both ease-out;
-moz-transform-origin:50% 50%;
-moz-animation:flipInLeft.5s both ease-out;
transform-origin:50% 50%;
animation:flipInLeft.5s both ease-out;
}
.pt-page-flipOutRight{
-webkit-transform-origin:50% 50%;
-webkit-animation:flipOutRight.5s both ease-in;
-moz-transform-origin:50% 50%;
-moz-animation:flipOutRight.5s both ease-in;
transform-origin:50% 50%;
animation:flipOutLeft.5s both ease-in;
}
.pt-page-flipInRight{
-webkit-transform-origin:50% 50%;
-webkit-animation:flipInRight.5s both ease-out;
-moz-transform-origin:50% 50%;
-moz-animation:flipInRight.5s both ease-out;
transform-origin:50% 50%;
animation:flipInRight.5s both ease-out;
}
.pt-page-flipOutTop{
-webkit-transform-origin:50% 50%;
-webkit-animation:flipOutRight.5s both ease-in;
-moz-transform-origin:50% 50%;
-moz-animation:flipOutRight.5s both ease-in;
transform-origin:50% 50%;
animation:flipOutTop.5s both ease-in;
}
.pt-page-flipInTop{
-webkit-transform-origin:50% 50%;
-webkit-animation:flipInTop.5s both ease-out;
-moa-transform-origin:50% 50%;
-moz-animation:flipInTop.5s both ease-out;
transform-origin:50% 50%;
animation:flipInTop.5s both ease-out;
}
.pt-page-flipOutBottom{
-webkit-transform-origin:50% 50%;
-webkit-animation:flipOutBottom.5s both ease-in;
-moz-transform-origin:50% 50%;
-moz-animation:flipOutBottom.5s both ease-in;
transform-origin:50% 50%;
animation:flipOutBottom.5s both ease-in;
}
.pt-page-flipInBottom{
-webkit-transform-origin:50% 50%;
-webkit-animation:flipInBottom.5s both ease-out;
-moz-transform-origin:50% 50%;
-moz-animation:flipInBottom.5s both ease-out;
transform-origin:50% 50%;
animation:flipOutBottom.5s both ease-out;
}
/* rotate fall */
.pt-page-rotateFall{
-webkit-transform-origin:0% 0%;
-webkit-animation:rotateFall.1s both ease-in;
-moz-tranform-origin:0% 0%;
-moz-animation:rotateFall.1s both ease-in;
transform-origin:0% 0%;
animation:rotateFall.1s both ease-in;
}
/* rotate newspaper */
.pt-page-rotateOutNewspaper{
-webkit-transform-origin:50% 50%;
-webkit-animation:rotateOutNewspaper.5s both ease-in;
-moz-transform-origin:50% 50%;
-moz-animation:rotateOutNewspaper.5s both ease-in;
transform-animation:0% 0%;
animation:rotateOutNewspaper.5s both ease-in;
}
.pt-page-rotateInNewspaper{
-webkit-transform-origin:50% 50%;
-webkit-animation:rotateOutNewspaper.5s both ease-out;
-moz-transform-origin:50% 50%;
-moz-transform:rotateOutNewspaper.5s both ease-out;
transform-origin:50% 50%;
animation:rotateOutNewspaper.5s both ease-out;
}
/* push */
.pt-page-rotatePushLeft {
-webkit-transform-origin: 0% 50%;
-webkit-animation: rotatePushLeft .8s both ease;
-moz-transform-origin: 0% 50%;
-moz-animation: rotatePushLeft .8s both ease;
transform-origin: 0% 50%;
animation: rotatePushLeft .8s both ease;
}
.pt-page-rotatePushRight {
-webkit-transform-origin: 100% 50%;
-webkit-animation: rotatePushRight .8s both ease;
-moz-transform-origin: 100% 50%;
-moz-animation: rotatePushRight .8s both ease;
transform-origin: 100% 50%;
animation: rotatePushRight .8s both ease;
}
.pt-page-rotatePushTop {
-webkit-transform-origin: 50% 0%;
-webkit-animation: rotatePushTop .8s both ease;
-moz-transform-origin: 50% 0%;
-moz-animation: rotatePushTop .8s both ease;
transform-origin: 50% 0%;
animation: rotatePushTop .8s both ease;
}
.pt-page-rotatePushBottom {
-webkit-transform-origin: 50% 100%;
-webkit-animation: rotatePushBottom .8s both ease;
-moz-transform-origin: 50% 100%;
-moz-animation: rotatePushBottom .8s both ease;
transform-origin: 50% 100%;
animation: rotatePushBottom .8s both ease;
}