nathann282
9/16/2017 - 11:35 AM
jquery.pagetransition.js
/* animation sets */
/* move from / to */
/* fade */
/* move from / to and fade */
/* move to with different easing */
/********************************* keyframes **************************************/
/* move from / to */
@-webkit-keyframes "moveToLeft" {
from {
}
to {
-webkit-transform: translateX(-100%);
}
}
@keyframes "moveToLeft" {
from {
}
to {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@-webkit-keyframes "moveFromLeft" {
from {
-webkit-transform: translateX(-100%);
}
}
@keyframes "moveFromLeft" {
from {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@-webkit-keyframes "moveToRight" {
from {
}
to {
-webkit-transform: translateX(100%);
}
}
@keyframes "moveToRight" {
from {
}
to {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
@-webkit-keyframes "moveFromRight" {
from {
-webkit-transform: translateX(100%);
}
}
@keyframes "moveFromRight" {
from {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
@-webkit-keyframes "moveToTop" {
from {
}
to {
-webkit-transform: translateY(-100%);
}
}
@keyframes "moveToTop" {
from {
}
to {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-webkit-keyframes "moveFromTop" {
from {
-webkit-transform: translateY(-100%);
}
}
@keyframes "moveFromTop" {
from {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-webkit-keyframes "moveToBottom" {
from {
}
to {
-webkit-transform: translateY(100%);
}
}
@keyframes "moveToBottom" {
from {
}
to {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
}
@-webkit-keyframes "moveFromBottom" {
from {
-webkit-transform: translateY(100%);
}
}
@keyframes "moveFromBottom" {
from {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
}
/* fade */
@-webkit-keyframes "fade" {
from {
}
to {
opacity: 0.3;
}
}
@keyframes "fade" {
from {
}
to {
opacity: 0.3;
}
}
/* move from / to and fade */
@-webkit-keyframes "moveToLeftFade" {
from {
}
to {
opacity: 0.3;
-webkit-transform: translateX(-100%);
}
}
@keyframes "moveToLeftFade" {
from {
}
to {
opacity: 0.3;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@-webkit-keyframes "moveFromLeftFade" {
from {
opacity: 0.3;
-webkit-transform: translateX(-100%);
}
}
@keyframes "moveFromLeftFade" {
from {
opacity: 0.3;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@-webkit-keyframes "moveToRightFade" {
from {
}
to {
opacity: 0.3;
-webkit-transform: translateX(100%);
}
}
@keyframes "moveToRightFade" {
from {
}
to {
opacity: 0.3;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
@-webkit-keyframes "moveFromRightFade" {
from {
opacity: 0.3;
-webkit-transform: translateX(100%);
}
}
@keyframes "moveFromRightFade" {
from {
opacity: 0.3;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
@-webkit-keyframes "moveToTopFade" {
from {
}
to {
opacity: 0.3;
-webkit-transform: translateY(-100%);
}
}
@keyframes "moveToTopFade" {
from {
}
to {
opacity: 0.3;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-webkit-keyframes "moveFromTopFade" {
from {
opacity: 0.3;
-webkit-transform: translateY(-100%);
}
}
@keyframes "moveFromTopFade" {
from {
opacity: 0.3;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-webkit-keyframes "moveToBottomFade" {
from {
}
to {
opacity: 0.3;
-webkit-transform: translateY(100%);
}
}
@keyframes "moveToBottomFade" {
from {
}
to {
opacity: 0.3;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
}
@-webkit-keyframes "moveFromBottomFade" {
from {
opacity: 0.3;
-webkit-transform: translateY(100%);
}
}
@keyframes "moveFromBottomFade" {
from {
opacity: 0.3;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
}
/* scale and fade */
/********************************* keyframes **************************************/
/* scale and fade */
@-webkit-keyframes "scaleDown" {
from {
}
to {
opacity: 0;
-webkit-transform: scale(.8);
}
}
@keyframes "scaleDown" {
from {
}
to {
opacity: 0;
-webkit-transform: scale(.8);
transform: scale(.8);
}
}
@-webkit-keyframes "scaleUp" {
from {
opacity: 0;
-webkit-transform: scale(.8);
}
}
@keyframes "scaleUp" {
from {
opacity: 0;
-webkit-transform: scale(.8);
transform: scale(.8);
}
}
@-webkit-keyframes "scaleUpDown" {
from {
opacity: 0;
-webkit-transform: scale(1.2);
}
}
@keyframes "scaleUpDown" {
from {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@-webkit-keyframes "scaleDownUp" {
from {
}
to {
opacity: 0;
-webkit-transform: scale(1.2);
}
}
@keyframes "scaleDownUp" {
from {
}
to {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@-webkit-keyframes "scaleDownCenter" {
from {
}
to {
opacity: 0;
-webkit-transform: scale(.7);
}
}
@keyframes "scaleDownCenter" {
from {
}
to {
opacity: 0;
-webkit-transform: scale(.7);
transform: scale(.7);
}
}
@-webkit-keyframes "scaleUpCenter" {
from {
opacity: 0;
-webkit-transform: scale(.7);
}
}
@keyframes "scaleUpCenter" {
from {
opacity: 0;
-webkit-transform: scale(.7);
transform: scale(.7);
}
}
/* rotate sides first and scale */
/* flip */
/* rotate fall */
/* rotate newspaper */
/* push */
/* pull */
/* fold */
/* unfold */
/* room walls */
/* cube */
/* carousel */
/* sides */
/* slide */
/********************************* keyframes **************************************/
/* rotate sides first and scale */
@-webkit-keyframes "rotateRightSideFirst" {
0% {
}
40% {
-webkit-transform: rotateY(15deg);
opacity: .8;
-webkit-animation-timing-function: ease-out;
}
100% {
-webkit-transform: scale(0.8) translateZ(-200px);
opacity: 0;
}
}
@keyframes "rotateRightSideFirst" {
0% {
}
40% {
-webkit-transform: rotateY(15deg);
transform: rotateY(15deg);
opacity: .8;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform: scale(0.8) translateZ(-200px);
transform: scale(0.8) translateZ(-200px);
opacity: 0;
}
}
@-webkit-keyframes "rotateLeftSideFirst" {
0% {
}
40% {
-webkit-transform: rotateY(-15deg);
opacity: .8;
-webkit-animation-timing-function: ease-out;
}
100% {
-webkit-transform: scale(0.8) translateZ(-200px);
opacity: 0;
}
}
@keyframes "rotateLeftSideFirst" {
0% {
}
40% {
-webkit-transform: rotateY(-15deg);
transform: rotateY(-15deg);
opacity: .8;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform: scale(0.8) translateZ(-200px);
transform: scale(0.8) translateZ(-200px);
opacity: 0;
}
}
@-webkit-keyframes "rotateTopSideFirst" {
0% {
}
40% {
-webkit-transform: rotateX(15deg);
opacity: .8;
-webkit-animation-timing-function: ease-out;
}
100% {
-webkit-transform: scale(0.8) translateZ(-200px);
opacity: 0;
}
}
@keyframes "rotateTopSideFirst" {
0% {
}
40% {
-webkit-transform: rotateX(15deg);
transform: rotateX(15deg);
opacity: .8;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform: scale(0.8) translateZ(-200px);
transform: scale(0.8) translateZ(-200px);
opacity: 0;
}
}
@-webkit-keyframes "rotateBottomSideFirst" {
0% {
}
40% {
-webkit-transform: rotateX(-15deg);
opacity: .8;
-webkit-animation-timing-function: ease-out;
}
100% {
-webkit-transform: scale(0.8) translateZ(-200px);
opacity: 0;
}
}
@keyframes "rotateBottomSideFirst" {
0% {
}
40% {
-webkit-transform: rotateX(-15deg);
transform: rotateX(-15deg);
opacity: .8;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform: scale(0.8) translateZ(-200px);
transform: scale(0.8) translateZ(-200px);
opacity: 0;
}
}
/* flip */
@-webkit-keyframes "flipOutRight" {
from {
}
to {
-webkit-transform: translateZ(-1000px) rotateY(90deg);
opacity: 0.2;
}
}
@keyframes "flipOutRight" {
from {
}
to {
-webkit-transform: translateZ(-1000px) rotateY(90deg);
transform: translateZ(-1000px) rotateY(90deg);
opacity: 0.2;
}
}
@-webkit-keyframes "flipInLeft" {
from {
-webkit-transform: translateZ(-1000px) rotateY(-90deg);
opacity: 0.2;
}
}
@keyframes "flipInLeft" {
from {
-webkit-transform: translateZ(-1000px) rotateY(-90deg);
transform: translateZ(-1000px) rotateY(-90deg);
opacity: 0.2;
}
}
@-webkit-keyframes "flipOutLeft" {
from {
}
to {
-webkit-transform: translateZ(-1000px) rotateY(-90deg);
opacity: 0.2;
}
}
@keyframes "flipOutLeft" {
from {
}
to {
-webkit-transform: translateZ(-1000px) rotateY(-90deg);
transform: translateZ(-1000px) rotateY(-90deg);
opacity: 0.2;
}
}
@-webkit-keyframes "flipInRight" {
from {
-webkit-transform: translateZ(-1000px) rotateY(90deg);
opacity: 0.2;
}
}
@keyframes "flipInRight" {
from {
-webkit-transform: translateZ(-1000px) rotateY(90deg);
transform: translateZ(-1000px) rotateY(90deg);
opacity: 0.2;
}
}
@-webkit-keyframes "flipOutTop" {
from {
}
to {
-webkit-transform: translateZ(-1000px) rotateX(90deg);
opacity: 0.2;
}
}
@keyframes "flipOutTop" {
from {
}
to {
-webkit-transform: translateZ(-1000px) rotateX(90deg);
transform: translateZ(-1000px) rotateX(90deg);
opacity: 0.2;
}
}
@-webkit-keyframes "flipInBottom" {
from {
-webkit-transform: translateZ(-1000px) rotateX(-90deg);
opacity: 0.2;
}
}
@keyframes "flipInBottom" {
from {
-webkit-transform: translateZ(-1000px) rotateX(-90deg);
transform: translateZ(-1000px) rotateX(-90deg);
opacity: 0.2;
}
}
@-webkit-keyframes "flipOutBottom" {
from {
}
to {
-webkit-transform: translateZ(-1000px) rotateX(-90deg);
opacity: 0.2;
}
}
@keyframes "flipOutBottom" {
from {
}
to {
-webkit-transform: translateZ(-1000px) rotateX(-90deg);
transform: translateZ(-1000px) rotateX(-90deg);
opacity: 0.2;
}
}
@-webkit-keyframes "flipInTop" {
from {
-webkit-transform: translateZ(-1000px) rotateX(90deg);
opacity: 0.2;
}
}
@keyframes "flipInTop" {
from {
-webkit-transform: translateZ(-1000px) rotateX(90deg);
transform: translateZ(-1000px) rotateX(90deg);
opacity: 0.2;
}
}
/* fall */
@-webkit-keyframes "rotateFall" {
0% {
-webkit-transform: rotateZ(0deg);
}
20% {
-webkit-transform: rotateZ(10deg);
-webkit-animation-timing-function: ease-out;
}
40% {
-webkit-transform: rotateZ(17deg);
}
60% {
-webkit-transform: rotateZ(16deg);
}
100% {
-webkit-transform: translateY(100%) rotateZ(17deg);
}
}
@keyframes "rotateFall" {
0% {
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
20% {
-webkit-transform: rotateZ(10deg);
transform: rotateZ(10deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: rotateZ(17deg);
transform: rotateZ(17deg);
}
60% {
-webkit-transform: rotateZ(16deg);
transform: rotateZ(16deg);
}
100% {
-webkit-transform: translateY(100%) rotateZ(17deg);
transform: translateY(100%) rotateZ(17deg);
}
}
/* newspaper */
@-webkit-keyframes "rotateOutNewspaper" {
from {
}
to {
-webkit-transform: translateZ(-3000px) rotateZ(360deg);
opacity: 0;
}
}
@keyframes "rotateOutNewspaper" {
from {
}
to {
-webkit-transform: translateZ(-3000px) rotateZ(360deg);
transform: translateZ(-3000px) rotateZ(360deg);
opacity: 0;
}
}
@-webkit-keyframes "rotateInNewspaper" {
from {
-webkit-transform: translateZ(-3000px) rotateZ(-360deg);
opacity: 0;
}
}
@keyframes "rotateInNewspaper" {
from {
-webkit-transform: translateZ(-3000px) rotateZ(-360deg);
transform: translateZ(-3000px) rotateZ(-360deg);
opacity: 0;
}
}
/* push */
@-webkit-keyframes "rotatePushLeft" {
from {
}
to {
opacity: 0;
-webkit-transform: rotateY(90deg);
}
}
@keyframes "rotatePushLeft" {
from {
}
to {
opacity: 0;
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
}
}
@-webkit-keyframes "rotatePushRight" {
from {
}
to {
opacity: 0;
-webkit-transform: rotateY(-90deg);
}
}
@keyframes "rotatePushRight" {
from {
}
to {
opacity: 0;
-webkit-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
}
@-webkit-keyframes "rotatePushTop" {
from {
}
to {
opacity: 0;
-webkit-transform: rotateX(-90deg);
}
}
@keyframes "rotatePushTop" {
from {
}
to {
opacity: 0;
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
}
@-webkit-keyframes "rotatePushBottom" {
from {
}
to {
opacity: 0;
-webkit-transform: rotateX(90deg);
}
}
@keyframes "rotatePushBottom" {
from {
}
to {
opacity: 0;
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
}
/* pull */
@-webkit-keyframes "rotatePullRight" {
from {
opacity: 0;
-webkit-transform: rotateY(-90deg);
}
}
@keyframes "rotatePullRight" {
from {
opacity: 0;
-webkit-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
}
@-webkit-keyframes "rotatePullLeft" {
from {
opacity: 0;
-webkit-transform: rotateY(90deg);
}
}
@keyframes "rotatePullLeft" {
from {
opacity: 0;
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
}
}
@-webkit-keyframes "rotatePullTop" {
from {
opacity: 0;
-webkit-transform: rotateX(-90deg);
}
}
@keyframes "rotatePullTop" {
from {
opacity: 0;
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
}
@-webkit-keyframes "rotatePullBottom" {
from {
opacity: 0;
-webkit-transform: rotateX(90deg);
}
}
@keyframes "rotatePullBottom" {
from {
opacity: 0;
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
}
/* fold */
@-webkit-keyframes "rotateFoldRight" {
from {
}
to {
opacity: 0;
-webkit-transform: translateX(100%) rotateY(90deg);
}
}
@keyframes "rotateFoldRight" {
from {
}
to {
opacity: 0;
-webkit-transform: translateX(100%) rotateY(90deg);
transform: translateX(100%) rotateY(90deg);
}
}
@-webkit-keyframes "rotateFoldLeft" {
from {
}
to {
opacity: 0;
-webkit-transform: translateX(-100%) rotateY(-90deg);
}
}
@keyframes "rotateFoldLeft" {
from {
}
to {
opacity: 0;
-webkit-transform: translateX(-100%) rotateY(-90deg);
transform: translateX(-100%) rotateY(-90deg);
}
}
@-webkit-keyframes "rotateFoldTop" {
from {
}
to {
opacity: 0;
-webkit-transform: translateY(-100%) rotateX(90deg);
}
}
@keyframes "rotateFoldTop" {
from {
}
to {
opacity: 0;
-webkit-transform: translateY(-100%) rotateX(90deg);
transform: translateY(-100%) rotateX(90deg);
}
}
@-webkit-keyframes "rotateFoldBottom" {
from {
}
to {
opacity: 0;
-webkit-transform: translateY(100%) rotateX(-90deg);
}
}
@keyframes "rotateFoldBottom" {
from {
}
to {
opacity: 0;
-webkit-transform: translateY(100%) rotateX(-90deg);
transform: translateY(100%) rotateX(-90deg);
}
}
/* unfold */
@-webkit-keyframes "rotateUnfoldLeft" {
from {
opacity: 0;
-webkit-transform: translateX(-100%) rotateY(-90deg);
}
}
@keyframes "rotateUnfoldLeft" {
from {
opacity: 0;
-webkit-transform: translateX(-100%) rotateY(-90deg);
transform: translateX(-100%) rotateY(-90deg);
}
}
@-webkit-keyframes "rotateUnfoldRight" {
from {
opacity: 0;
-webkit-transform: translateX(100%) rotateY(90deg);
}
}
@keyframes "rotateUnfoldRight" {
from {
opacity: 0;
-webkit-transform: translateX(100%) rotateY(90deg);
transform: translateX(100%) rotateY(90deg);
}
}
@-webkit-keyframes "rotateUnfoldTop" {
from {
opacity: 0;
-webkit-transform: translateY(-100%) rotateX(90deg);
}
}
@keyframes "rotateUnfoldTop" {
from {
opacity: 0;
-webkit-transform: translateY(-100%) rotateX(90deg);
transform: translateY(-100%) rotateX(90deg);
}
}
@-webkit-keyframes "rotateUnfoldBottom" {
from {
opacity: 0;
-webkit-transform: translateY(100%) rotateX(-90deg);
}
}
@keyframes "rotateUnfoldBottom" {
from {
opacity: 0;
-webkit-transform: translateY(100%) rotateX(-90deg);
transform: translateY(100%) rotateX(-90deg);
}
}
/* room walls */
@-webkit-keyframes "rotateRoomLeftOut" {
from {
}
to {
opacity: .3;
-webkit-transform: translateX(-100%) rotateY(90deg);
}
}
@keyframes "rotateRoomLeftOut" {
from {
}
to {
opacity: .3;
-webkit-transform: translateX(-100%) rotateY(90deg);
transform: translateX(-100%) rotateY(90deg);
}
}
@-webkit-keyframes "rotateRoomLeftIn" {
from {
opacity: .3;
-webkit-transform: translateX(100%) rotateY(-90deg);
}
}
@keyframes "rotateRoomLeftIn" {
from {
opacity: .3;
-webkit-transform: translateX(100%) rotateY(-90deg);
transform: translateX(100%) rotateY(-90deg);
}
}
@-webkit-keyframes "rotateRoomRightOut" {
from {
}
to {
opacity: .3;
-webkit-transform: translateX(100%) rotateY(-90deg);
}
}
@keyframes "rotateRoomRightOut" {
from {
}
to {
opacity: .3;
-webkit-transform: translateX(100%) rotateY(-90deg);
transform: translateX(100%) rotateY(-90deg);
}
}
@-webkit-keyframes "rotateRoomRightIn" {
from {
opacity: .3;
-webkit-transform: translateX(-100%) rotateY(90deg);
}
}
@keyframes "rotateRoomRightIn" {
from {
opacity: .3;
-webkit-transform: translateX(-100%) rotateY(90deg);
transform: translateX(-100%) rotateY(90deg);
}
}
@-webkit-keyframes "rotateRoomTopOut" {
from {
}
to {
opacity: .3;
-webkit-transform: translateY(-100%) rotateX(-90deg);
}
}
@keyframes "rotateRoomTopOut" {
from {
}
to {
opacity: .3;
-webkit-transform: translateY(-100%) rotateX(-90deg);
transform: translateY(-100%) rotateX(-90deg);
}
}
@-webkit-keyframes "rotateRoomTopIn" {
from {
opacity: .3;
-webkit-transform: translateY(100%) rotateX(90deg);
}
}
@keyframes "rotateRoomTopIn" {
from {
opacity: .3;
-webkit-transform: translateY(100%) rotateX(90deg);
transform: translateY(100%) rotateX(90deg);
}
}
@-webkit-keyframes "rotateRoomBottomOut" {
from {
}
to {
opacity: .3;
-webkit-transform: translateY(100%) rotateX(90deg);
}
}
@keyframes "rotateRoomBottomOut" {
from {
}
to {
opacity: .3;
-webkit-transform: translateY(100%) rotateX(90deg);
transform: translateY(100%) rotateX(90deg);
}
}
@-webkit-keyframes "rotateRoomBottomIn" {
from {
opacity: .3;
-webkit-transform: translateY(-100%) rotateX(-90deg);
}
}
@keyframes "rotateRoomBottomIn" {
from {
opacity: .3;
-webkit-transform: translateY(-100%) rotateX(-90deg);
transform: translateY(-100%) rotateX(-90deg);
}
}
/* cube */
@-webkit-keyframes "rotateCubeLeftOut" {
0% {
}
50% {
-webkit-animation-timing-function: ease-out;
-webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg);
}
100% {
opacity: .3;
-webkit-transform: translateX(-100%) rotateY(-90deg);
}
}
@keyframes "rotateCubeLeftOut" {
0% {
}
50% {
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg);
transform: translateX(-50%) translateZ(-200px) rotateY(-45deg);
}
100% {
opacity: .3;
-webkit-transform: translateX(-100%) rotateY(-90deg);
transform: translateX(-100%) rotateY(-90deg);
}
}
@-webkit-keyframes "rotateCubeLeftIn" {
0% {
opacity: .3;
-webkit-transform: translateX(100%) rotateY(90deg);
}
50% {
-webkit-animation-timing-function: ease-out;
-webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg);
}
}
@keyframes "rotateCubeLeftIn" {
0% {
opacity: .3;
-webkit-transform: translateX(100%) rotateY(90deg);
transform: translateX(100%) rotateY(90deg);
}
50% {
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg);
transform: translateX(50%) translateZ(-200px) rotateY(45deg);
}
}
@-webkit-keyframes "rotateCubeRightOut" {
0% {
}
50% {
-webkit-animation-timing-function: ease-out;
-webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg);
}
100% {
opacity: .3;
-webkit-transform: translateX(100%) rotateY(90deg);
}
}
@keyframes "rotateCubeRightOut" {
0% {
}
50% {
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg);
transform: translateX(50%) translateZ(-200px) rotateY(45deg);
}
100% {
opacity: .3;
-webkit-transform: translateX(100%) rotateY(90deg);
transform: translateX(100%) rotateY(90deg);
}
}
@-webkit-keyframes "rotateCubeRightIn" {
0% {
opacity: .3;
-webkit-transform: translateX(-100%) rotateY(-90deg);
}
50% {
-webkit-animation-timing-function: ease-out;
-webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg);
}
}
@keyframes "rotateCubeRightIn" {
0% {
opacity: .3;
-webkit-transform: translateX(-100%) rotateY(-90deg);
transform: translateX(-100%) rotateY(-90deg);
}
50% {
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg);
transform: translateX(-50%) translateZ(-200px) rotateY(-45deg);
}
}
@-webkit-keyframes "rotateCubeTopOut" {
0% {
}
50% {
-webkit-animation-timing-function: ease-out;
-webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
}
100% {
opacity: .3;
-webkit-transform: translateY(-100%) rotateX(90deg);
}
}
@keyframes "rotateCubeTopOut" {
0% {
}
50% {
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
}
100% {
opacity: .3;
-webkit-transform: translateY(-100%) rotateX(90deg);
transform: translateY(-100%) rotateX(90deg);
}
}
@-webkit-keyframes "rotateCubeTopIn" {
0% {
opacity: .3;
-webkit-transform: translateY(100%) rotateX(-90deg);
}
50% {
-webkit-animation-timing-function: ease-out;
-webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
}
}
@keyframes "rotateCubeTopIn" {
0% {
opacity: .3;
-webkit-transform: translateY(100%) rotateX(-90deg);
transform: translateY(100%) rotateX(-90deg);
}
50% {
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
}
}
@-webkit-keyframes "rotateCubeBottomOut" {
0% {
}
50% {
-webkit-animation-timing-function: ease-out;
-webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
}
100% {
opacity: .3;
-webkit-transform: translateY(100%) rotateX(-90deg);
}
}
@keyframes "rotateCubeBottomOut" {
0% {
}
50% {
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
}
100% {
opacity: .3;
-webkit-transform: translateY(100%) rotateX(-90deg);
transform: translateY(100%) rotateX(-90deg);
}
}
@-webkit-keyframes "rotateCubeBottomIn" {
0% {
opacity: .3;
-webkit-transform: translateY(-100%) rotateX(90deg);
}
50% {
-webkit-animation-timing-function: ease-out;
-webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
}
}
@keyframes "rotateCubeBottomIn" {
0% {
opacity: .3;
-webkit-transform: translateY(-100%) rotateX(90deg);
transform: translateY(-100%) rotateX(90deg);
}
50% {
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
}
}
/* carousel */
@-webkit-keyframes "rotateCarouselLeftOut" {
from {
}
to {
opacity: .3;
-webkit-transform: translateX(-150%) scale(.4) rotateY(-65deg);
}
}
@keyframes "rotateCarouselLeftOut" {
from {
}
to {
opacity: .3;
-webkit-transform: translateX(-150%) scale(.4) rotateY(-65deg);
transform: translateX(-150%) scale(.4) rotateY(-65deg);
}
}
@-webkit-keyframes "rotateCarouselLeftIn" {
from {
opacity: .3;
-webkit-transform: translateX(200%) scale(.4) rotateY(65deg);
}
}
@keyframes "rotateCarouselLeftIn" {
from {
opacity: .3;
-webkit-transform: translateX(200%) scale(.4) rotateY(65deg);
transform: translateX(200%) scale(.4) rotateY(65deg);
}
}
@-webkit-keyframes "rotateCarouselRightOut" {
from {
}
to {
opacity: .3;
-webkit-transform: translateX(200%) scale(.4) rotateY(65deg);
}
}
@keyframes "rotateCarouselRightOut" {
from {
}
to {
opacity: .3;
-webkit-transform: translateX(200%) scale(.4) rotateY(65deg);
transform: translateX(200%) scale(.4) rotateY(65deg);
}
}
@-webkit-keyframes "rotateCarouselRightIn" {
from {
opacity: .3;
-webkit-transform: translateX(-200%) scale(.4) rotateY(-65deg);
}
}
@keyframes "rotateCarouselRightIn" {
from {
opacity: .3;
-webkit-transform: translateX(-200%) scale(.4) rotateY(-65deg);
transform: translateX(-200%) scale(.4) rotateY(-65deg);
}
}
@-webkit-keyframes "rotateCarouselTopOut" {
from {
}
to {
opacity: .3;
-webkit-transform: translateY(-200%) scale(.4) rotateX(65deg);
}
}
@keyframes "rotateCarouselTopOut" {
from {
}
to {
opacity: .3;
-webkit-transform: translateY(-200%) scale(.4) rotateX(65deg);
transform: translateY(-200%) scale(.4) rotateX(65deg);
}
}
@-webkit-keyframes "rotateCarouselTopIn" {
from {
opacity: .3;
-webkit-transform: translateY(200%) scale(.4) rotateX(-65deg);
}
}
@keyframes "rotateCarouselTopIn" {
from {
opacity: .3;
-webkit-transform: translateY(200%) scale(.4) rotateX(-65deg);
transform: translateY(200%) scale(.4) rotateX(-65deg);
}
}
@-webkit-keyframes "rotateCarouselBottomOut" {
from {
}
to {
opacity: .3;
-webkit-transform: translateY(200%) scale(.4) rotateX(-65deg);
}
}
@keyframes "rotateCarouselBottomOut" {
from {
}
to {
opacity: .3;
-webkit-transform: translateY(200%) scale(.4) rotateX(-65deg);
transform: translateY(200%) scale(.4) rotateX(-65deg);
}
}
@-webkit-keyframes "rotateCarouselBottomIn" {
from {
opacity: .3;
-webkit-transform: translateY(-200%) scale(.4) rotateX(65deg);
}
}
@keyframes "rotateCarouselBottomIn" {
from {
opacity: .3;
-webkit-transform: translateY(-200%) scale(.4) rotateX(65deg);
transform: translateY(-200%) scale(.4) rotateX(65deg);
}
}
/* sides */
@-webkit-keyframes "rotateSidesOut" {
from {
}
to {
opacity: 0;
-webkit-transform: translateZ(-500px) rotateY(90deg);
}
}
@keyframes "rotateSidesOut" {
from {
}
to {
opacity: 0;
-webkit-transform: translateZ(-500px) rotateY(90deg);
transform: translateZ(-500px) rotateY(90deg);
}
}
@-webkit-keyframes "rotateSidesIn" {
from {
opacity: 0;
-webkit-transform: translateZ(-500px) rotateY(-90deg);
}
}
@keyframes "rotateSidesIn" {
from {
opacity: 0;
-webkit-transform: translateZ(-500px) rotateY(-90deg);
transform: translateZ(-500px) rotateY(-90deg);
}
}
/* slide */
@-webkit-keyframes "rotateSlideOut" {
0% {
}
25% {
opacity: .5;
-webkit-transform: translateZ(-500px);
}
75% {
opacity: .5;
-webkit-transform: translateZ(-500px) translateX(-200%);
}
100% {
opacity: .5;
-webkit-transform: translateZ(-500px) translateX(-200%);
}
}
@keyframes "rotateSlideOut" {
0% {
}
25% {
opacity: .5;
-webkit-transform: translateZ(-500px);
transform: translateZ(-500px);
}
75% {
opacity: .5;
-webkit-transform: translateZ(-500px) translateX(-200%);
transform: translateZ(-500px) translateX(-200%);
}
100% {
opacity: .5;
-webkit-transform: translateZ(-500px) translateX(-200%);
transform: translateZ(-500px) translateX(-200%);
}
}
@-webkit-keyframes "rotateSlideIn" {
0%,25% {
opacity: .5;
-webkit-transform: translateZ(-500px) translateX(200%);
}
75% {
opacity: .5;
-webkit-transform: translateZ(-500px);
}
100% {
opacity: 1;
-webkit-transform: translateZ(0) translateX(0);
}
}
@keyframes "rotateSlideIn" {
0%,25% {
opacity: .5;
-webkit-transform: translateZ(-500px) translateX(200%);
transform: translateZ(-500px) translateX(200%);
}
75% {
opacity: .5;
-webkit-transform: translateZ(-500px);
transform: translateZ(-500px);
}
100% {
opacity: 1;
-webkit-transform: translateZ(0) translateX(0);
transform: translateZ(0) translateX(0);
}
}
/* animation delay classes */
.page--moveToLeft {
-webkit-animation: moveToLeft .6s ease both;
animation: moveToLeft .6s ease both;
}
.page--moveFromLeft {
-webkit-animation: moveFromLeft .6s ease both;
animation: moveFromLeft .6s ease both;
}
.page--moveToRight {
-webkit-animation: moveToRight .6s ease both;
animation: moveToRight .6s ease both;
}
.page--moveFromRight {
-webkit-animation: moveFromRight .6s ease both;
animation: moveFromRight .6s ease both;
}
.page--moveToTop {
-webkit-animation: moveToTop .6s ease both;
animation: moveToTop .6s ease both;
}
.page--moveFromTop {
-webkit-animation: moveFromTop .6s ease both;
animation: moveFromTop .6s ease both;
}
.page--moveToBottom {
-webkit-animation: moveToBottom .6s ease both;
animation: moveToBottom .6s ease both;
}
.page--moveFromBottom {
-webkit-animation: moveFromBottom .6s ease both;
animation: moveFromBottom .6s ease both;
}
.page--fade {
-webkit-animation: fade .7s ease both;
animation: fade .7s ease both;
}
.page--moveToLeftFade {
-webkit-animation: moveToLeftFade .7s ease both;
animation: moveToLeftFade .7s ease both;
}
.page--moveFromLeftFade {
-webkit-animation: moveFromLeftFade .7s ease both;
animation: moveFromLeftFade .7s ease both;
}
.page--moveToRightFade {
-webkit-animation: moveToRightFade .7s ease both;
animation: moveToRightFade .7s ease both;
}
.page--moveFromRightFade {
-webkit-animation: moveFromRightFade .7s ease both;
animation: moveFromRightFade .7s ease both;
}
.page--moveToTopFade {
-webkit-animation: moveToTopFade .7s ease both;
animation: moveToTopFade .7s ease both;
}
.page--moveFromTopFade {
-webkit-animation: moveFromTopFade .7s ease both;
animation: moveFromTopFade .7s ease both;
}
.page--moveToBottomFade {
-webkit-animation: moveToBottomFade .7s ease both;
animation: moveToBottomFade .7s ease both;
}
.page--moveFromBottomFade {
-webkit-animation: moveFromBottomFade .7s ease both;
animation: moveFromBottomFade .7s ease both;
}
.page--moveToLeftEasing {
-webkit-animation: moveToLeft .7s ease-in-out both;
animation: moveToLeft .7s ease-in-out both;
}
.page--moveToRightEasing {
-webkit-animation: moveToRight .7s ease-in-out both;
animation: moveToRight .7s ease-in-out both;
}
.page--moveToTopEasing {
-webkit-animation: moveToTop .7s ease-in-out both;
animation: moveToTop .7s ease-in-out both;
}
.page--moveToBottomEasing {
-webkit-animation: moveToBottom .7s ease-in-out both;
animation: moveToBottom .7s ease-in-out both;
}
.page--scaleDown {
-webkit-animation: scaleDown .7s ease both;
animation: scaleDown .7s ease both;
}
.page--scaleUp {
-webkit-animation: scaleUp .7s ease both;
animation: scaleUp .7s ease both;
}
.page--scaleUpDown {
-webkit-animation: scaleUpDown .5s ease both;
animation: scaleUpDown .5s ease both;
}
.page--scaleDownUp {
-webkit-animation: scaleDownUp .5s ease both;
animation: scaleDownUp .5s ease both;
}
.page--scaleDownCenter {
-webkit-animation: scaleDownCenter .4s ease-in both;
animation: scaleDownCenter .4s ease-in both;
}
.page--scaleUpCenter {
-webkit-animation: scaleUpCenter .4s ease-out both;
animation: scaleUpCenter .4s ease-out both;
}
.page--rotateRightSideFirst {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-animation: rotateRightSideFirst .8s both ease-in;
animation: rotateRightSideFirst .8s both ease-in;
}
.page--rotateLeftSideFirst {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-animation: rotateLeftSideFirst .8s both ease-in;
animation: rotateLeftSideFirst .8s both ease-in;
}
.page--rotateTopSideFirst {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-animation: rotateTopSideFirst .8s both ease-in;
animation: rotateTopSideFirst .8s both ease-in;
}
.page--rotateBottomSideFirst {
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-animation: rotateBottomSideFirst .8s both ease-in;
animation: rotateBottomSideFirst .8s both ease-in;
}
.page--flipOutRight {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: flipOutRight .5s both ease-in;
animation: flipOutRight .5s both ease-in;
}
.page--flipInLeft {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: flipInLeft .5s both ease-out;
animation: flipInLeft .5s both ease-out;
}
.page--flipOutLeft {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: flipOutLeft .5s both ease-in;
animation: flipOutLeft .5s both ease-in;
}
.page--flipInRight {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: flipInRight .5s both ease-out;
animation: flipInRight .5s both ease-out;
}
.page--flipOutTop {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: flipOutTop .5s both ease-in;
animation: flipOutTop .5s both ease-in;
}
.page--flipInBottom {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: flipInBottom .5s both ease-out;
animation: flipInBottom .5s both ease-out;
}
.page--flipOutBottom {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: flipOutBottom .5s both ease-in;
animation: flipOutBottom .5s both ease-in;
}
.page--flipInTop {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: flipInTop .5s both ease-out;
animation: flipInTop .5s both ease-out;
}
.page--rotateFall {
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-animation: rotateFall 1s both ease-in;
animation: rotateFall 1s both ease-in;
}
.page--rotateOutNewspaper {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: rotateOutNewspaper .5s both ease-in;
animation: rotateOutNewspaper .5s both ease-in;
}
.page--rotateInNewspaper {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: rotateInNewspaper .5s both ease-out;
animation: rotateInNewspaper .5s both ease-out;
}
.page--rotatePushLeft {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-animation: rotatePushLeft .8s both ease;
animation: rotatePushLeft .8s both ease;
}
.page--rotatePushRight {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-animation: rotatePushRight .8s both ease;
animation: rotatePushRight .8s both ease;
}
.page--rotatePushTop {
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-animation: rotatePushTop .8s both ease;
animation: rotatePushTop .8s both ease;
}
.page--rotatePushBottom {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-animation: rotatePushBottom .8s both ease;
animation: rotatePushBottom .8s both ease;
}
.page--rotatePullRight {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-animation: rotatePullRight .5s both ease;
animation: rotatePullRight .5s both ease;
}
.page--rotatePullLeft {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-animation: rotatePullLeft .5s both ease;
animation: rotatePullLeft .5s both ease;
}
.page--rotatePullTop {
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-animation: rotatePullTop .5s both ease;
animation: rotatePullTop .5s both ease;
}
.page--rotatePullBottom {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-animation: rotatePullBottom .5s both ease;
animation: rotatePullBottom .5s both ease;
}
.page--rotateFoldRight {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-animation: rotateFoldRight .7s both ease;
animation: rotateFoldRight .7s both ease;
}
.page--rotateFoldLeft {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-animation: rotateFoldLeft .7s both ease;
animation: rotateFoldLeft .7s both ease;
}
.page--rotateFoldTop {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-animation: rotateFoldTop .7s both ease;
animation: rotateFoldTop .7s both ease;
}
.page--rotateFoldBottom {
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-animation: rotateFoldBottom .7s both ease;
animation: rotateFoldBottom .7s both ease;
}
.page--rotateUnfoldLeft {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-animation: rotateUnfoldLeft .7s both ease;
animation: rotateUnfoldLeft .7s both ease;
}
.page--rotateUnfoldRight {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-animation: rotateUnfoldRight .7s both ease;
animation: rotateUnfoldRight .7s both ease;
}
.page--rotateUnfoldTop {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-animation: rotateUnfoldTop .7s both ease;
animation: rotateUnfoldTop .7s both ease;
}
.page--rotateUnfoldBottom {
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-animation: rotateUnfoldBottom .7s both ease;
animation: rotateUnfoldBottom .7s both ease;
}
.page--rotateRoomLeftOut {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-animation: rotateRoomLeftOut .8s both ease;
animation: rotateRoomLeftOut .8s both ease;
}
.page--rotateRoomLeftIn {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-animation: rotateRoomLeftIn .8s both ease;
animation: rotateRoomLeftIn .8s both ease;
}
.page--rotateRoomRightOut {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-animation: rotateRoomRightOut .8s both ease;
animation: rotateRoomRightOut .8s both ease;
}
.page--rotateRoomRightIn {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-animation: rotateRoomRightIn .8s both ease;
animation: rotateRoomRightIn .8s both ease;
}
.page--rotateRoomTopOut {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-animation: rotateRoomTopOut .8s both ease;
animation: rotateRoomTopOut .8s both ease;
}
.page--rotateRoomTopIn {
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-animation: rotateRoomTopIn .8s both ease;
animation: rotateRoomTopIn .8s both ease;
}
.page--rotateRoomBottomOut {
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-animation: rotateRoomBottomOut .8s both ease;
animation: rotateRoomBottomOut .8s both ease;
}
.page--rotateRoomBottomIn {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-animation: rotateRoomBottomIn .8s both ease;
animation: rotateRoomBottomIn .8s both ease;
}
.page--rotateCubeLeftOut {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-animation: rotateCubeLeftOut .6s both ease-in;
animation: rotateCubeLeftOut .6s both ease-in;
}
.page--rotateCubeLeftIn {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-animation: rotateCubeLeftIn .6s both ease-in;
animation: rotateCubeLeftIn .6s both ease-in;
}
.page--rotateCubeRightOut {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-animation: rotateCubeRightOut .6s both ease-in;
animation: rotateCubeRightOut .6s both ease-in;
}
.page--rotateCubeRightIn {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-animation: rotateCubeRightIn .6s both ease-in;
animation: rotateCubeRightIn .6s both ease-in;
}
.page--rotateCubeTopOut {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-animation: rotateCubeTopOut .6s both ease-in;
animation: rotateCubeTopOut .6s both ease-in;
}
.page--rotateCubeTopIn {
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-animation: rotateCubeTopIn .6s both ease-in;
animation: rotateCubeTopIn .6s both ease-in;
}
.page--rotateCubeBottomOut {
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-animation: rotateCubeBottomOut .6s both ease-in;
animation: rotateCubeBottomOut .6s both ease-in;
}
.page--rotateCubeBottomIn {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-animation: rotateCubeBottomIn .6s both ease-in;
animation: rotateCubeBottomIn .6s both ease-in;
}
.page--rotateCarouselLeftOut {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-animation: rotateCarouselLeftOut .8s both ease;
animation: rotateCarouselLeftOut .8s both ease;
}
.page--rotateCarouselLeftIn {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-animation: rotateCarouselLeftIn .8s both ease;
animation: rotateCarouselLeftIn .8s both ease;
}
.page--rotateCarouselRightOut {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-animation: rotateCarouselRightOut .8s both ease;
animation: rotateCarouselRightOut .8s both ease;
}
.page--rotateCarouselRightIn {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-animation: rotateCarouselRightIn .8s both ease;
animation: rotateCarouselRightIn .8s both ease;
}
.page--rotateCarouselTopOut {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-animation: rotateCarouselTopOut .8s both ease;
animation: rotateCarouselTopOut .8s both ease;
}
.page--rotateCarouselTopIn {
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-animation: rotateCarouselTopIn .8s both ease;
animation: rotateCarouselTopIn .8s both ease;
}
.page--rotateCarouselBottomOut {
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-animation: rotateCarouselBottomOut .8s both ease;
animation: rotateCarouselBottomOut .8s both ease;
}
.page--rotateCarouselBottomIn {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-animation: rotateCarouselBottomIn .8s both ease;
animation: rotateCarouselBottomIn .8s both ease;
}
.page--rotateSidesOut {
-webkit-transform-origin: -50% 50%;
transform-origin: -50% 50%;
-webkit-animation: rotateSidesOut .5s both ease-in;
animation: rotateSidesOut .5s both ease-in;
}
.page--rotateSidesIn {
-webkit-transform-origin: 150% 50%;
transform-origin: 150% 50%;
-webkit-animation: rotateSidesIn .5s both ease-out;
animation: rotateSidesIn .5s both ease-out;
}
.page--rotateSlideOut {
-webkit-animation: rotateSlideOut 1s both ease;
animation: rotateSlideOut 1s both ease;
}
.page--rotateSlideIn {
-webkit-animation: rotateSlideIn 1s both ease;
animation: rotateSlideIn 1s both ease;
}
.page--delay100 {
-webkit-animation-delay: .1s;
animation-delay: .1s;
}
.page--delay180 {
-webkit-animation-delay: .180s;
animation-delay: .180s;
}
.page--delay200 {
-webkit-animation-delay: .2s;
animation-delay: .2s;
}
.page--delay300 {
-webkit-animation-delay: .3s;
animation-delay: .3s;
}
.page--delay400 {
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
.page--delay500 {
-webkit-animation-delay: .5s;
animation-delay: .5s;
}
.page--delay700 {
-webkit-animation-delay: .7s;
animation-delay: .7s;
}
.page--delay1000 {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
/**
* @name pagetransition
* @author nathannguyen282
* @description description
* @version 1.0
* @options
* item
* itemActiveClass
* starterId
* nav
* navContainer
* navContainerClass
* navElement
* navClass
* navActiveClass
s * @methods
* init
* initNav
* setActivePage
* goToNextPage
* destroy
*/
;(function (factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else if (typeof exports !== 'undefined') {
module.exports = factory(require('jquery'));
} else {
factory(jQuery);
}
})(function($) {
'use strict';
var pluginName = 'pageTransition';
var $pages,
pageData = {},
isAnimating = false,
nav,
$currPage,
$tempCurrPage,
inClass,
outClass,
isDup = false;
var animations = {
max: 67
},
endCurrPage = false,
endNextPage = false;
var pfx = ['webkit', 'moz', 'MS', 'o', ''];
var animationType = '';
for (var i in pfx) {
animationType = animationType + pfx[i] + 'AnimationEnd ';
}
function checkPage (page) {
if (!(page in pageData)) {
return false;
} else {
return true;
}
}
function resetPage($outpage, $inpage) {
$outpage.removeClass(outClass);
$inpage.removeClass(inClass);
isDup = false;
}
function onEndAnimation($outpage, $inpage) {
endCurrPage = false;
endNextPage = false;
resetPage($outpage, $inpage);
isAnimating = false;
}
function checkAnimationEnd() {
if (endCurrPage && endNextPage) {
onEndAnimation($tempCurrPage, $currPage);
}
}
function PageTransition(element, options) {
this.element = $(element);
this.options = $.extend({}, $.fn[pluginName].defaults, this.element.data(), options);
this.init();
}
PageTransition.prototype = {
init: function() {
var that = this,
$el = that.element,
opt = that.options,
starterPage;
// Get all pages
$pages = $el.children(opt.item);
// Cross check to get starter page ID
if (location.hash !== '') {
starterPage = location.hash.replace('#', '');
} else if ($pages.hasClass(opt.itemActiveClass)) {
starterPage = $pages.filter('.' + opt.itemActiveClass).data('id');
} else {
starterPage = opt.starterId;
}
// Get all data-id of pages
// if page doesn't have data-id, it will replace with index
$pages.each(function(index) {
var $page = $(this);
var id;
if ($page.data('id') === undefined) {
return;
} else {
id = $page.data('id');
}
$page.data('id', index);
pageData[id] = $page.data();
});
// Define nav
this.initNav();
// Active on startup
this.setActivePage(starterPage);
window.onhashchange = function() {
if (!isDup) {
var page = location.hash.replace('#', '');
that.goToNextPage(page);
}
};
},
/**
* Initialize nav
*/
initNav: function() {
var that = this;
var opt = this.options;
var $el = this.element;
var navPos = (opt.nav) ? document.querySelector(opt.nav) : '';
var container = document.createElement(opt.navContainer);
container.className = opt.navContainerClass;
var keys = Object.keys(pageData);
for (var i = 0, l = keys.length; i < l; i++) {
var text = (pageData[keys[i]]['navText'] === undefined || ' ') ? keys[i] : pageData[keys[i]]['navText'];
var child = document.createElement(opt.navElement);
if (opt.navElement === 'a') {child.href = 'javascript:void(0)';}
child.className = opt.navClass;
child.setAttribute('data-target', keys[i]);
child.innerHTML = text;
container.appendChild(child);
}
if (!navPos) {
$el.append(container);
} else {
$.each(navPos.attributes,function(index, value){
container.setAttribute(value.name, value.value + ' ' + container.getAttribute(value.name));
});
$(navPos).replaceWith(container);
}
nav = container;
// nav click event
$(nav).on('click.' + pluginName, opt.navElement, function(e) {
e.preventDefault();
isDup = true;
var target = $(this).data('target');
that.goToNextPage(target);
});
},
/**
* set active page
*
* @param {string} page
*/
setActivePage: function(page) {
var opt = this.options;
if (!checkPage(page)) {return false;}
var id = pageData[page]['id'];
$currPage = $pages.eq(id);
$pages.removeClass(opt.itemActiveClass).eq(id).addClass(opt.itemActiveClass);
$(nav).children(opt.navElement).removeClass(opt.navActiveClass).filter('[data-target*="' + page + '"]').addClass(opt.navActiveClass);
location.hash = '#' + page;
},
/**
* animate to next page
*
* @param {string} page
*/
goToNextPage: function(page) {
if (!checkPage(page)) {return false;}
var animation = pageData[page]['animation'].toString();
// Check if the delimiter '-' is present then create an animation array list.
if(animation.indexOf('-') !== -1) {
var randomAnimList = animation.split('-');
animation = parseInt(randomAnimList[(Math.floor(Math.random() * randomAnimList.length))]);
} else {
animation = parseInt(animation);
}
// Checking if the animation number is out of bound, max allowed value is 1 to 67.
if (animation > animations.max) {
alert('Transition.js : Invalid "data-animation" attribute configuration. Animation number should not be greater than 67');
return false;
}
if(isAnimating) {
return false;
}
isAnimating = true;
this.setActivePage(page);
$tempCurrPage = $currPage;
$currPage = $pages.eq(pageData[page]['id']);
switch(animation) {
case 1:
inClass = 'page--moveFromRight';
outClass = 'page--moveToLeft';
break;
case 2:
inClass = 'page--moveFromLeft';
outClass = 'page--moveToRight';
break;
case 3:
inClass = 'page--moveFromBottom';
outClass = 'page--moveToTop';
break;
case 4:
inClass = 'page--moveFromTop';
outClass = 'page--moveToBottom';
break;
case 5:
inClass = 'page--moveFromRight page--ontop';
outClass = 'page--fade';
break;
case 6:
inClass = 'page--moveFromLeft page--ontop';
outClass = 'page--fade';
break;
case 7:
inClass = 'page--moveFromBottom page--ontop';
outClass = 'page--fade';
break;
case 8:
inClass = 'page--moveFromTop page--ontop';
outClass = 'page--fade';
break;
case 9:
inClass = 'page--moveFromRightFade';
outClass = 'page--moveToLeftFade';
break;
case 10:
inClass = 'page--moveFromLeftFade';
outClass = 'page--moveToRightFade';
break;
case 11:
inClass = 'page--moveFromBottomFade';
outClass = 'page--moveToTopFade';
break;
case 12:
inClass = 'page--moveFromTopFade';
outClass = 'page--moveToBottomFade';
break;
case 13:
inClass = 'page--moveFromRight';
outClass = 'page--moveToLeftEasing page--ontop';
break;
case 14:
inClass = 'page--moveFromLeft';
outClass = 'page--moveToRightEasing page--ontop';
break;
case 15:
inClass = 'page--moveFromBottom';
outClass = 'page--moveToTopEasing page--ontop';
break;
case 16:
inClass = 'page--moveFromTop';
outClass = 'page--moveToBottomEasing page--ontop';
break;
case 17:
inClass = 'page--moveFromRight page--ontop';
outClass = 'page--scaleDown';
break;
case 18:
inClass = 'page--moveFromLeft page--ontop';
outClass = 'page--scaleDown';
break;
case 19:
inClass = 'page--moveFromBottom page--ontop';
outClass = 'page--scaleDown';
break;
case 20:
inClass = 'page--moveFromTop page--ontop';
outClass = 'page--scaleDown';
break;
case 21:
inClass = 'page--scaleUpDown page--delay300';
outClass = 'page--scaleDown';
break;
case 22:
inClass = 'page--scaleUp page--delay300';
outClass = 'page--scaleDownUp';
break;
case 23:
inClass = 'page--scaleUp';
outClass = 'page--moveToLeft page--ontop';
break;
case 24:
inClass = 'page--scaleUp';
outClass = 'page--moveToRight page--ontop';
break;
case 25:
inClass = 'page--scaleUp';
outClass = 'page--moveToTop page--ontop';
break;
case 26:
inClass = 'page--scaleUp';
outClass = 'page--moveToBottom page--ontop';
break;
case 27:
inClass = 'page--scaleUpCenter page--delay400';
outClass = 'page--scaleDownCenter';
break;
case 28:
inClass = 'page--moveFromRight page--delay200 page--ontop';
outClass = 'page--rotateRightSideFirst';
break;
case 29:
inClass = 'page--moveFromLeft page--delay200 page--ontop';
outClass = 'page--rotateLeftSideFirst';
break;
case 30:
inClass = 'page--moveFromTop page--delay200 page--ontop';
outClass = 'page--rotateTopSideFirst';
break;
case 31:
inClass = 'page--moveFromBottom page--delay200 page--ontop';
outClass = 'page--rotateBottomSideFirst';
break;
case 32:
inClass = 'page--flipInLeft page--delay500';
outClass = 'page--flipOutRight';
break;
case 33:
inClass = 'page--flipInRight page--delay500';
outClass = 'page--flipOutLeft';
break;
case 34:
inClass = 'page--flipInBottom page--delay500';
outClass = 'page--flipOutTop';
break;
case 35:
inClass = 'page--flipInTop page--delay500';
outClass = 'page--flipOutBottom';
break;
case 36:
inClass = 'page--scaleUp';
outClass = 'page--rotateFall page--ontop';
break;
case 37:
inClass = 'page--rotateInNewspaper page--delay500';
outClass = 'page--rotateOutNewspaper';
break;
case 38:
inClass = 'page--moveFromRight';
outClass = 'page--rotatePushLeft';
break;
case 39:
inClass = 'page--moveFromLeft';
outClass = 'page--rotatePushRight';
break;
case 40:
inClass = 'page--moveFromBottom';
outClass = 'page--rotatePushTop';
break;
case 41:
inClass = 'page--moveFromTop';
outClass = 'page--rotatePushBottom';
break;
case 42:
inClass = 'page--rotatePullRight page--delay180';
outClass = 'page--rotatePushLeft';
break;
case 43:
inClass = 'page--rotatePullLeft page--delay180';
outClass = 'page--rotatePushRight';
break;
case 44:
inClass = 'page--rotatePullBottom page--delay180';
outClass = 'page--rotatePushTop';
break;
case 45:
inClass = 'page--rotatePullTop page--delay180';
outClass = 'page--rotatePushBottom';
break;
case 46:
inClass = 'page--moveFromRightFade';
outClass = 'page--rotateFoldLeft';
break;
case 47:
inClass = 'page--moveFromLeftFade';
outClass = 'page--rotateFoldRight';
break;
case 48:
inClass = 'page--moveFromBottomFade';
outClass = 'page--rotateFoldTop';
break;
case 49:
inClass = 'page--moveFromTopFade';
outClass = 'page--rotateFoldBottom';
break;
case 50:
inClass = 'page--rotateUnfoldLeft';
outClass = 'page--moveToRightFade';
break;
case 51:
inClass = 'page--rotateUnfoldRight';
outClass = 'page--moveToLeftFade';
break;
case 52:
inClass = 'page--rotateUnfoldTop';
outClass = 'page--moveToBottomFade';
break;
case 53:
inClass = 'page--rotateUnfoldBottom';
outClass = 'page--moveToTopFade';
break;
case 54:
inClass = 'page--rotateRoomLeftIn';
outClass = 'page--rotateRoomLeftOut page--ontop';
break;
case 55:
inClass = 'page--rotateRoomRightIn';
outClass = 'page--rotateRoomRightOut page--ontop';
break;
case 56:
inClass = 'page--rotateRoomTopIn';
outClass = 'page--rotateRoomTopOut page--ontop';
break;
case 57:
inClass = 'page--rotateRoomBottomIn';
outClass = 'page--rotateRoomBottomOut page--ontop';
break;
case 58:
inClass = 'page--rotateCubeLeftIn';
outClass = 'page--rotateCubeLeftOut page--ontop';
break;
case 59:
inClass = 'page--rotateCubeRightIn';
outClass = 'page--rotateCubeRightOut page--ontop';
break;
case 60:
inClass = 'page--rotateCubeTopIn';
outClass = 'page--rotateCubeTopOut page--ontop';
break;
case 61:
inClass = 'page--rotateCubeBottomIn';
outClass = 'page--rotateCubeBottomOut page--ontop';
break;
case 62:
inClass = 'page--rotateCarouselLeftIn';
outClass = 'page--rotateCarouselLeftOut page--ontop';
break;
case 63:
inClass = 'page--rotateCarouselRightIn';
outClass = 'page--rotateCarouselRightOut page--ontop';
break;
case 64:
inClass = 'page--rotateCarouselTopIn';
outClass = 'page--rotateCarouselTopOut page--ontop';
break;
case 65:
inClass = 'page--rotateCarouselBottomIn';
outClass = 'page--rotateCarouselBottomOut page--ontop';
break;
case 66:
inClass = 'page--rotateSidesIn page--delay200';
outClass = 'page--rotateSidesOut';
break;
case 67:
inClass = 'page--rotateSlideIn';
outClass = 'page--rotateSlideOut';
break;
}
$tempCurrPage.addClass(outClass).one(animationType, function() {
endCurrPage = true;
checkAnimationEnd();
});
$currPage.addClass(inClass).one(animationType, function() {
endNextPage = true;
checkAnimationEnd();
});
},
/**
* Unbinds the plugin.
*/
destroy: function() {
$.removeData(this.element[0], pluginName);
}
};
$.fn[pluginName] = function(options, params) {
return this.each(function() {
var instance = $.data(this, pluginName);
if (!instance) {
$.data(this, pluginName, new PageTransition(this, options));
} else if (instance[options]) {
instance[options](params);
}
});
};
$.fn[pluginName].defaults = {
item: '.page',
itemActiveClass: 'page--active',
starterId: 0,
nav: '',
navContainer: 'nav',
navContainerClass: 'nav',
navElement: 'a',
navClass: '',
navActiveClass: 'active'
};
$(function() {
$('[data-' + pluginName + ']').on('customEvent', function() {
});
$('[data-' + pluginName + ']')[pluginName]({
});
});
});