.pt-page { width: 100%; height: 100%; position: absolute; top: 0; left: 0; visibility: hidden; overflow: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .pt-page-current{ visibility: visible; z-index: 1; } .pt-page-ontop { /* z-index: 999;*/ z-index: 10; } .pt-page-moveToLeft { -webkit-animation: moveToLeft .6s ease both; -moz-animation: moveToLeft .6s ease both; animation: moveToLeft .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-moveToTop { -webkit-animation: moveToTop .6s ease both; -moz-animation: moveToTop .6s ease both; animation: moveToTop .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-moveFromRight { -webkit-animation: moveFromRight .6s ease both; -moz-animation: moveFromRight .6s ease both; animation: moveFromRight .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-moveFromTop { -webkit-animation: moveFromTop .6s ease both; -moz-animation: moveFromTop .6s ease both; animation: moveFromTop .6s ease both; } .pt-page-moveFromBottom { -webkit-animation: moveFromBottom .6s ease both; -moz-animation: moveFromBottom .6s ease both; animation: moveFromBottom .6s ease both; } @-webkit-keyframes moveToLeft { to { -webkit-transform: translateX(-100%); } } @-moz-keyframes moveToLeft { to { -moz-transform: translateX(-100%); } } @keyframes moveToLeft { to { transform: translateX(-100%); } } @-webkit-keyframes moveToRight { to { -webkit-transform: translateX(100%); } } @-moz-keyframes moveToRight { to { -moz-transform: translateX(100%); } } @keyframes moveToRight { to { transform: translateX(100%); } } @-webkit-keyframes moveToTop { to { -webkit-transform: translateY(-100%); } } @-moz-keyframes moveToTop { to { -moz-transform: translateY(-100%); } } @keyframes moveToTop { to { transform: 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 moveFromRight { from { -webkit-transform: translateX(100%); } } @-moz-keyframes moveFromRight { from { -moz-transform: translateX(100%); } } @keyframes moveFromRight { from { transform: translateX(100%); } } @-webkit-keyframes moveFromLeft { from { -webkit-transform: translateX(-100%); } } @-moz-keyframes moveFromLeft { from { -moz-transform: translateX(-100%); } } @keyframes moveFromLeft { from { transform: translateX(-100%); } } @-webkit-keyframes moveFromTop { from { -webkit-transform: translateY(-100%); } } @-moz-keyframes moveFromTop { from { -moz-transform: translateY(-100%); } } @keyframes moveFromTop { from { transform: translateY(-100%); } } @-webkit-keyframes moveFromBottom { from { -webkit-transform: translateY(100%); } } @-moz-keyframes moveFromBottom { from { -moz-transform: translateY(100%); } } @keyframes moveFromBottom { from { transform: translateY(100%); } }