Skip to main content

css animation

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});
</script>
<style>

/* animation sets */

/* move from / to  */

.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: moveToTop .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: moveFromTopFade .7s ease both;
    animation: moveFromTopFade .7s ease both;
}

.pt-page-moveToBottomFade {
    -webkit-animation: moveToBottomFade .7s ease both;
    -moz-animation: moveToBottomFade .7s ease both;
    animation: moveToBottomFade .7s ease both;
}

.pt-page-moveFromBottomFade {
    -webkit-animation: moveFromBottomFade .7s ease both;
    -moz-animation: moveFromBottomFade .7s ease both;
    animation: moveFromBottomFade .7s ease both;
}

/* move to with different easing */

.pt-page-moveToLeftEasing {
    -webkit-animation: moveToLeft .7s ease-in-out both;
    -moz-animation: moveToLeft .7s ease-in-out both;
    animation: moveToLeft .7s ease-in-out both;
}
.pt-page-moveToRightEasing {
    -webkit-animation: moveToRight .7s ease-in-out both;
    -moz-animation: moveToRight .7s ease-in-out both;
    animation: moveToRight .7s ease-in-out both;
}
.pt-page-moveToTopEasing {
    -webkit-animation: moveToTop .7s ease-in-out both;
    -moz-animation: moveToTop .7s ease-in-out both;
    animation: moveToTop .7s ease-in-out both;
}
.pt-page-moveToBottomEasing {
    -webkit-animation: moveToBottom .7s ease-in-out both;
    -moz-animation: moveToBottom .7s ease-in-out both;
    animation: moveToBottom .7s ease-in-out both;
}

/********************************* keyframes **************************************/

/* 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 {
    from { -webkit-transform: translateX(-100%); }
}
@-moz-keyframes moveFromLeft {
    from { -moz-transform: translateX(-100%); }
}
@keyframes moveFromLeft {
    from { 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 moveFromRight {
    from { -webkit-transform: translateX(100%); }
}
@-moz-keyframes moveFromRight {
    from { -moz-transform: translateX(100%); }
}
@keyframes moveFromRight {
    from { 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 moveFromTop {
    from { -webkit-transform: translateY(-100%); }
}
@-moz-keyframes moveFromTop {
    from { -moz-transform: translateY(-100%); }
}
@keyframes moveFromTop {
    from { 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 moveFromBottom {
    from { -webkit-transform: translateY(100%); }
}
@-moz-keyframes moveFromBottom {
    from { -moz-transform: translateY(100%); }
}
@keyframes moveFromBottom {
    from { 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: translateX(-100%); }
}
@-moz-keyframes moveToLeftFade {
    to { opacity: 0.3; -moz-transform: translateX(-100%); }
}
@keyframes moveToLeftFade {
    to { opacity: 0.3; transform: translateX(-100%); }
}

@-webkit-keyframes moveFromLeftFade {
    from { opacity: 0.3; -webkit-transform: translateX(-100%); }
}
@-moz-keyframes moveFromLeftFade {
    from { opacity: 0.3; -moz-transform: translateX(-100%); }
}
@keyframes moveFromLeftFade {
    from { 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 {
    from { opacity: 0.3; -webkit-transform: translateX(100%); }
}
@-moz-keyframes moveFromRightFade {
    from { opacity: 0.3; -moz-transform: translateX(100%); }
}
@keyframes moveFromRightFade {
    from { 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 {
    from { opacity: 0.3; -webkit-transform: translateY(-100%); }
}
@-moz-keyframes moveFromTopFade {
    from { opacity: 0.3; -moz-transform: translateY(-100%); }
}
@keyframes moveFromTopFade {
    from { 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%); }
}

@-webkit-keyframes moveFromBottomFade {
    from { opacity: 0.3; -webkit-transform: translateY(100%); }
}
@-moz-keyframes moveFromBottomFade {
    from { opacity: 0.3; -moz-transform: translateY(100%); }
}
@keyframes moveFromBottomFade {
    from { 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-scaleUpDown {
    -webkit-animation: scaleUpDown .5s ease both;
    -moz-animation: scaleUpDown .5s ease both;
    animation: scaleUpDown .5s ease both;
}

.pt-page-scaleDownUp {
    -webkit-animation: scaleDownUp .5s ease both;
    -moz-animation: scaleDownUp .5s ease both;
    animation: scaleDownUp .5s ease both;
}

.pt-page-scaleDownCenter {
    -webkit-animation: scaleDownCenter .4s ease-in both;
    -moz-animation: scaleDownCenter .4s ease-in both;
    animation: scaleDownCenter .4s ease-in both;
}

.pt-page-scaleUpCenter {
    -webkit-animation: scaleUpCenter .4s ease-out both;
    -moz-animation: scaleUpCenter .4s ease-out both;
    animation: scaleUpCenter .4s ease-out both;
}

/********************************* keyframes **************************************/

/* scale and fade */

@-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 {
    from { opacity: 0; -webkit-transform: scale(.8); }
}
@-moz-keyframes scaleUp {
    from { opacity: 0; -moz-transform: scale(.8); }
}
@keyframes scaleUp {
    from { opacity: 0; transform: scale(.8); }
}

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

@-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 scaleDownCenter {
    to { opacity: 0; -webkit-transform: scale(.7); }
}
@-moz-keyframes scaleDownCenter {
    to { opacity: 0; -moz-transform: scale(.7); }
}
@keyframes scaleDownCenter {
    to { opacity: 0; transform: scale(.7); }
}

@-webkit-keyframes scaleUpCenter {
    from { opacity: 0; -webkit-transform: scale(.7); }
}
@-moz-keyframes scaleUpCenter {
    from { opacity: 0; -moz-transform: scale(.7); }
}
@keyframes scaleUpCenter {
    from { opacity: 0; transform: scale(.7); }
}

/* 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: rotateLeftSideFirst .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: rotateTopSideFirst .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%;
    animation: rotateBottomSideFirst .8s both ease-in;
}

/* flip */

.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: flipOutRight .5s 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-flipOutLeft {
    -webkit-transform-origin: 50% 50%;
    -webkit-animation: flipOutLeft .5s both ease-in;
    -moz-transform-origin: 50% 50%;
    -moz-animation: flipOutLeft .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: flipOutTop .5s both ease-in;
    -moz-transform-origin: 50% 50%;
    -moz-animation: flipOutTop .5s both ease-in;
    transform-origin: 50% 50%;
    animation: flipOutTop .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: flipInBottom .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-flipInTop {
    -webkit-transform-origin: 50% 50%;
    -webkit-animation: flipInTop .5s both ease-out;
    -moz-transform-origin: 50% 50%;
    -moz-animation: flipInTop .5s both ease-out;
    transform-origin: 50% 50%;
    animation: flipInTop .5s both ease-out;
}

/* rotate fall */

.pt-page-rotateFall {
    -webkit-transform-origin: 0% 0%;
    -webkit-animation: rotateFall 1s both ease-in;
    -moz-transform-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-origin: 50% 50%;
    animation: rotateOutNewspaper .5s both ease-in;
}
.pt-page-rotateInNewspaper {
    -webkit-transform-origin: 50% 50%;
    -webkit-animation: rotateInNewspaper .5s both ease-out;
    -moz-transform-origin: 50% 50%;
    -moz-animation: rotateInNewspaper .5s both ease-out;
    transform-origin: 50% 50%;
    animation: rotateInNewspaper .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;
}

/* pull */
.pt-page-rotatePullRight {
    -webkit-transform-origin: 100% 50%;
    -webkit-animation: rotatePullRight .5s both ease;
    -moz-transform-origin: 100% 50%;
    -moz-animation: rotatePullRight .5s both ease;
    transform-origin: 100% 50%;
    animation: rotatePullRight .5s both ease;
}
.pt-page-rotatePullLeft {
    -webkit-transform-origin: 0% 50%;
    -webkit-animation: rotatePullLeft .5s both ease;
    -moz-transform-origin: 0% 50%;
    -moz-animation: rotatePullLeft .5s both ease;
    transform-origin: 0% 50%;
    animation: rotatePullLeft .5s both ease;
}
.pt-page-rotatePullTop {
    -webkit-transform-origin: 50% 0%;
    -webkit-animation: rotatePullTop .5s both ease;
    -moz-transform-origin: 50% 0%;
    -moz-animation: rotatePullTop .5s both ease;
    transform-origin: 50% 0%;
    animation: rotatePullTop .5s both ease;
}
.pt-page-rotatePullBottom {
    -webkit-transform-origin: 50% 100%;
    -webkit-animation: rotatePullBottom .5s both ease;
    -moz-transform-origin: 50% 100%;
    -moz-animation: rotatePullBottom .5s both ease;
    transform-origin: 50% 100%;
    animation: rotatePullBottom .5s both ease;
}

/* fold */
.pt-page-rotateFoldRight {
    -webkit-transform-origin: 0% 50%;
    -webkit-animation: rotateFoldRight .7s both ease;
    -moz-transform-origin: 0% 50%;
    -moz-animation: rotateFoldRight .7s both ease;
    transform-origin: 0% 50%;
    animation: rotateFoldRight .7s both ease;
}
.pt-page-rotateFoldLeft {
    -webkit-transform-origin: 100% 50%;
    -webkit-animation: rotateFoldLeft .7s both ease;
    -moz-transform-origin: 100% 50%;
    -moz-animation: rotateFoldLeft .7s both ease;
    transform-origin: 100% 50%;
    animation: rotateFoldLeft .7s both ease;
}
.pt-page-rotateFoldTop {
    -webkit-transform-origin: 50% 100%;
    -webkit-animation: rotateFoldTop .7s both ease;
    -moz-transform-origin: 50% 100%;
    -moz-animation: rotateFoldTop .7s both ease;
    transform-origin: 50% 100%;
    animation: rotateFoldTop .7s both ease;
}
.pt-page-rotateFoldBottom {
    -webkit-transform-origin: 50% 0%;
    -webkit-animation: rotateFoldBottom .7s both ease;
    -moz-transform-origin: 50% 0%;
    -moz-animation: rotateFoldBottom .7s both ease;
    transform-origin: 50% 0%;
    animation: rotateFoldBottom .7s both ease;
}

/* unfold */
.pt-page-rotateUnfoldLeft {
    -webkit-transform-origin: 100% 50%;
    -webkit-animation: rotateUnfoldLeft .7s both ease;
    -moz-transform-origin: 100% 50%;
    -moz-animation: rotateUnfoldLeft .7s both ease;
    transform-origin: 100% 50%;
    animation: rotateUnfoldLeft .7s both ease;
}
.pt-page-rotateUnfoldRight {
    -webkit-transform-origin: 0% 50%;
    -webkit-animation: rotateUnfoldRight .7s both ease;
    -moz-transform-origin: 0% 50%;
    -moz-animation: rotateUnfoldRight .7s both ease;
    transform-origin: 0% 50%;
    animation: rotateUnfoldRight .7s both ease;
}
.pt-page-rotateUnfoldTop {
    -webkit-transform-origin: 50% 100%;
    -webkit-animation: rotateUnfoldTop .7s both ease;
    -moz-transform-origin: 50% 100%;
    -moz-animation: rotateUnfoldTop .7s both ease;
    transform-origin: 50% 100%;
    animation: rotateUnfoldTop .7s both ease;
}
.pt-page-rotateUnfoldBottom {
    -webkit-transform-origin: 50% 0%;
    -webkit-animation: rotateUnfoldBottom .7s both ease;
    -moz-transform-origin: 50% 0%;
    -moz-animation: rotateUnfoldBottom .7s both ease;
    transform-origin: 50% 0%;
    animation: rotateUnfoldBottom .7s both ease;
}

/* room walls */
.pt-page-rotateRoomLeftOut {
    -webkit-transform-origin: 100% 50%;
    -webkit-animation: rotateRoomLeftOut .8s both ease;
    -moz-transform-origin: 100% 50%;
    -moz-animation: rotateRoomLeftOut .8s both ease;
    transform-origin: 100% 50%;
    animation: rotateRoomLeftOut .8s both ease;
}
.pt-page-rotateRoomLeftIn {
    -webkit-transform-origin: 0% 50%;
    -webkit-animation: rotateRoomLeftIn .8s both ease;
    -moz-transform-origin: 0% 50%;
    -moz-animation: rotateRoomLeftIn .8s both ease;
    transform-origin: 0% 50%;
    animation: rotateRoomLeftIn .8s both ease;
}
.pt-page-rotateRoomRightOut {
    -webkit-transform-origin: 0% 50%;
    -webkit-animation: rotateRoomRightOut .8s both ease;
    -moz-transform-origin: 0% 50%;
    -moz-animation: rotateRoomRightOut .8s both ease;
    transform-origin: 0% 50%;
    animation: rotateRoomRightOut .8s both ease;
}
.pt-page-rotateRoomRightIn {
    -webkit-transform-origin: 100% 50%;
    -webkit-animation: rotateRoomRightIn .8s both ease;
    -moz-transform-origin: 100% 50%;
    -moz-animation: rotateRoomRightIn .8s both ease;
    transform-origin: 100% 50%;
    animation: rotateRoomRightIn .8s both ease;
}
.pt-page-rotateRoomTopOut {
    -webkit-transform-origin: 50% 100%;
    -webkit-animation: rotateRoomTopOut .8s both ease;
    -moz-transform-origin: 50% 100%;
    -moz-animation: rotateRoomTopOut .8s both ease;
    transform-origin: 50% 100%;
    animation: rotateRoomTopOut .8s both ease;
}
.pt-page-rotateRoomTopIn {
    -webkit-transform-origin: 50% 0%;
    -webkit-animation: rotateRoomTopIn .8s both ease;
    -moz-transform-origin: 50% 0%;
    -moz-animation: rotateRoomTopIn .8s both ease;
    transform-origin: 50% 0%;
    animation: rotateRoomTopIn .8s both ease;
}
.pt-page-rotateRoomBottomOut {
    -webkit-transform-origin: 50% 0%;
    -webkit-animation: rotateRoomBottomOut .8s both ease;
    -moz-transform-origin: 50% 0%;
    -moz-animation: rotateRoomBottomOut .8s both ease;
    transform-origin: 50% 0%;
    animation: rotateRoomBottomOut .8s both ease;
}
.pt-page-rotateRoomBottomIn {
    -webkit-transform-origin: 50% 100%;
    -webkit-animation: rotateRoomBottomIn .8s both ease;
    -moz-transform-origin: 50% 100%;
    -moz-animation: rotateRoomBottomIn .8s both ease;
    transform-origin: 50% 100%;
    animation: rotateRoomBottomIn .8s both ease;
}

/* cube */
.pt-page-rotateCubeLeftOut {
    -webkit-transform-origin: 100% 50%;
    -webkit-animation: rotateCubeLeftOut .6s both ease-in;
    -moz-transform-origin: 100% 50%;
    -moz-animation: rotateCubeLeftOut .6s both ease-in;
    transform-origin: 100% 50%;
    animation: rotateCubeLeftOut .6s both ease-in;
}
.pt-page-rotateCubeLeftIn {
    -webkit-transform-origin: 0% 50%;
    -webkit-animation: rotateCubeLeftIn .6s both ease-in;
    -moz-transform-origin: 0% 50%;
    -moz-animation: rotateCubeLeftIn .6s both ease-in;
    transform-origin: 0% 50%;
    animation: rotateCubeLeftIn .6s both ease-in;
}
.pt-page-rotateCubeRightOut {
    -webkit-transform-origin: 0% 50%;
    -webkit-animation: rotateCubeRightOut .6s both ease-in;
    -moz-transform-origin: 0% 50%;
    -moz-animation: rotateCubeRightOut .6s both ease-in;
    transform-origin: 0% 50%;
    animation: rotateCubeRightOut .6s both ease-in;
}
.pt-page-rotateCubeRightIn {
    -webkit-transform-origin: 100% 50%;
    -webkit-animation: rotateCubeRightIn .6s both ease-in;
    -moz-transform-origin: 100% 50%;
    -moz-animation: rotateCubeRightIn .6s both ease-in;
    transform-origin: 100% 50%;
    animation: rotateCubeRightIn .6s both ease-in;
}
.pt-page-rotateCubeTopOut {
    -webkit-transform-origin: 50% 100%;
    -webkit-animation: rotateCubeTopOut .6s both ease-in;
    -moz-transform-origin: 50% 100%;
    -moz-animation: rotateCubeTopOut .6s both ease-in;
    transform-origin: 50% 100%;
    animation: rotateCubeTopOut .6s both ease-in;
}
.pt-page-rotateCubeTopIn {
    -webkit-transform-origin: 50% 0%;
    -webkit-animation: rotateCubeTopIn .6s both ease-in;
    -moz-transform-origin: 50% 0%;
    -moz-animation: rotateCubeTopIn .6s both ease-in;
    transform-origin: 50% 0%;
    animation: rotateCubeTopIn .6s both ease-in;
}
.pt-page-rotateCubeBottomOut {
    -webkit-transform-origin: 50% 0%;
    -webkit-animation: rotateCubeBottomOut .6s both ease-in;
    -moz-transform-origin: 50% 0%;
    -moz-animation: rotateCubeBottomOut .6s both ease-in;
    transform-origin: 50% 0%;
    animation: rotateCubeBottomOut .6s both ease-in;
}
.pt-page-rotateCubeBottomIn {
    -webkit-transform-origin: 50% 100%;
    -webkit-animation: rotateCubeBottomIn .6s both ease-in;
    -moz-transform-origin: 50% 100%;
    -moz-animation: rotateCubeBottomIn .6s both ease-in;
    transform-origin: 50% 100%;
    animation: rotateCubeBottomIn .6s both ease-in;
}

/* carousel */
.pt-page-rotateCarouselLeftOut {
    -webkit-transform-origin: 100% 50%;
    -webkit-animation: rotateCarouselLeftOut .8s both ease;
    -moz-transform-origin: 100% 50%;
    -moz-animation: rotateCarouselLeftOut .8s both ease;
    transform-origin: 100% 50%;
    animation: rotateCarouselLeftOut .8s both ease;
}
.pt-page-rotateCarouselLeftIn {
    -webkit-transform-origin: 0% 50%;
    -webkit-animation: rotateCarouselLeftIn .8s both ease;
    -moz-transform-origin: 0% 50%;
    -moz-animation: rotateCarouselLeftIn .8s both ease;
    transform-origin: 0% 50%;
    animation: rotateCarouselLeftIn .8s both ease;
}
.pt-page-rotateCarouselRightOut {
    -webkit-transform-origin: 0% 50%;
    -webkit-animation: rotateCarouselRightOut .8s both ease;
    -moz-transform-origin: 0% 50%;
    -moz-animation: rotateCarouselRightOut .8s both ease;
    transform-origin: 0% 50%;
    animation: rotateCarouselRightOut .8s both ease;
}
.pt-page-rotateCarouselRightIn {
    -webkit-transform-origin: 100% 50%;
    -webkit-animation: rotateCarouselRightIn .8s both ease;
    -moz-transform-origin: 100% 50%;
    -moz-animation: rotateCarouselRightIn .8s both ease;
    transform-origin: 100% 50%;
    animation: rotateCarouselRightIn .8s both ease;
}
.pt-page-rotateCarouselTopOut {
    -webkit-transform-origin: 50% 100%;
    -webkit-animation: rotateCarouselTopOut .8s both ease;
    -moz-transform-origin: 50% 100%;
    -moz-animation: rotateCarouselTopOut .8s both ease;
    transform-origin: 50% 100%;
    animation: rotateCarouselTopOut .8s both ease;
}
.pt-page-rotateCarouselTopIn {
    -webkit-transform-origin: 50% 0%;
    -webkit-animation: rotateCarouselTopIn .8s both ease;
    -moz-transform-origin: 50% 0%;
    -moz-animation: rotateCarouselTopIn .8s both ease;
    transform-origin: 50% 0%;
    animation: rotateCarouselTopIn .8s both ease;
}
.pt-page-rotateCarouselBottomOut {
    -webkit-transform-origin: 50% 0%;
    -webkit-animation: rotateCarouselBottomOut .8s both ease;
    -moz-transform-origin: 50% 0%;
    -moz-animation: rotateCarouselBottomOut .8s both ease;
    transform-origin: 50% 0%;
    animation: rotateCarouselBottomOut .8s both ease;
}
.pt-page-rotateCarouselBottomIn {
    -webkit-transform-origin: 50% 100%;
    -webkit-animation: rotateCarouselBottomIn .8s both ease;
    -moz-transform-origin: 50% 100%;
    -moz-animation: rotateCarouselBottomIn .8s both ease;
    transform-origin: 50% 100%;
    animation: rotateCarouselBottomIn .8s both ease;
}

/* sides */
.pt-page-rotateSidesOut {
    -webkit-transform-origin: -50% 50%;
    -webkit-animation: rotateSidesOut .5s both ease-in;
    -moz-transform-origin: -50% 50%;
    -moz-animation: rotateSidesOut .5s both ease-in;
    transform-origin: -50% 50%;
    animation: rotateSidesOut .5s both ease-in;
}
.pt-page-rotateSidesIn {
    -webkit-transform-origin: 150% 50%;
    -webkit-animation: rotateSidesIn .5s both ease-out;
    -moz-transform-origin: 150% 50%;
    -moz-animation: rotateSidesIn .5s both ease-out;
    transform-origin: 150% 50%;
    animation: rotateSidesIn .5s both ease-out;
}

/* slide */
.pt-page-rotateSlideOut {
    -webkit-animation: rotateSlideOut 1s both ease;
    -moz-animation: rotateSlideOut 1s both ease;
    animation: rotateSlideOut 1s both ease;
}
.pt-page-rotateSlideIn {
    -webkit-animation: rotateSlideIn 1s both ease;
    -moz-animation: rotateSlideIn 1s both ease;
    animation: rotateSlideIn 1s both ease;
}

/********************************* keyframes **************************************/

/* rotate sides first and scale */

@-webkit-keyframes rotateRightSideFirst {
    40% { -webkit-transform: rotateY(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; }
    100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; }
}
@-moz-keyframes rotateRightSideFirst {
    40% { -moz-transform: rotateY(15deg); opacity: .8; -moz-animation-timing-function: ease-out; }
    100% { -moz-transform: scale(0.8) translateZ(-200px); opacity:0; }
}
@keyframes rotateRightSideFirst {
    40% { transform: rotateY(15deg); opacity: .8; animation-timing-function: ease-out; }
    100% { transform: scale(0.8) translateZ(-200px); opacity:0; }
}

@-webkit-keyframes rotateLeftSideFirst {
    40% { -webkit-transform: rotateY(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; }
    100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; }
}
@-moz-keyframes rotateLeftSideFirst {
    40% { -moz-transform: rotateY(-15deg); opacity: .8; -moz-animation-timing-function: ease-out; }
    100% { -moz-transform: scale(0.8) translateZ(-200px); opacity:0; }
}
@keyframes rotateLeftSideFirst {
    40% { transform: rotateY(-15deg); opacity: .8; animation-timing-function: ease-out; }
    100% { transform: scale(0.8) translateZ(-200px); opacity:0; }
}

@-webkit-keyframes rotateTopSideFirst {
    40% { -webkit-transform: rotateX(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; }
    100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; }
}
@-moz-keyframes rotateTopSideFirst {
    40% { -moz-transform: rotateX(15deg); opacity: .8; -moz-animation-timing-function: ease-out; }
    100% { -moz-transform: scale(0.8) translateZ(-200px); opacity:0; }
}
@keyframes rotateTopSideFirst {
    40% { transform: rotateX(15deg); opacity: .8; animation-timing-function: ease-out; }
    100% { transform: scale(0.8) translateZ(-200px); opacity:0; }
}

@-webkit-keyframes rotateBottomSideFirst {
    40% { -webkit-transform: rotateX(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; }
    100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; }
}
@-moz-keyframes rotateBottomSideFirst {
    40% { -moz-transform: rotateX(-15deg); opacity: .8; -moz-animation-timing-function: ease-out; }
    100% { -moz-transform: scale(0.8) translateZ(-200px); opacity:0; }
}
@keyframes rotateBottomSideFirst {
    40% { transform: rotateX(-15deg); opacity: .8; animation-timing-function: ease-out; }
    100% { transform: scale(0.8) translateZ(-200px); opacity:0; }
}

/* flip */

@-webkit-keyframes flipOutRight {
    to { -webkit-transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }
}
@-moz-keyframes flipOutRight {
    to { -moz-transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }
}
@keyframes flipOutRight {
    to { transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }
}

@-webkit-keyframes flipInLeft {
    from { -webkit-transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; }
}
@-moz-keyframes flipInLeft {
    from { -moz-transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; }
}
@keyframes flipInLeft {
    from { transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; }
}

@-webkit-keyframes flipOutLeft {
    to { -webkit-transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; }
}
@-moz-keyframes flipOutLeft {
    to { -moz-transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; }
}
@keyframes flipOutLeft {
    to { transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; }
}

@-webkit-keyframes flipInRight {
    from { -webkit-transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }
}
@-moz-keyframes flipInRight {
    from { -moz-transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }
}
@keyframes flipInRight {
    from { transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }
}

@-webkit-keyframes flipOutTop {
    to { -webkit-transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; }
}
@-moz-keyframes flipOutTop {
    to { -moz-transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; }
}
@keyframes flipOutTop {
    to { transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; }
}

@-webkit-keyframes flipInBottom {
    from { -webkit-transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; }
}
@-moz-keyframes flipInBottom {
    from { -moz-transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; }
}
@keyframes flipInBottom {
    from { transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; }
}

@-webkit-keyframes flipOutBottom {
    to { -webkit-transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; }
}
@-moz-keyframes flipOutBottom {
    to { -moz-transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; }
}
@keyframes flipOutBottom {
    to { transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; }
}

@-webkit-keyframes flipInTop {
    from { -webkit-transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; }
}
@-moz-keyframes flipInTop {
    from { -moz-transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; }
}
@keyframes flipInTop {
    from { 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); }
}
@-moz-keyframes rotateFall {
    0% { -moz-transform: rotateZ(0deg); }
    20% { -moz-transform: rotateZ(10deg); -moz-animation-timing-function: ease-out; }
    40% { -moz-transform: rotateZ(17deg); }
    60% { -moz-transform: rotateZ(16deg); }
    100% { -moz-transform: translateY(100%) rotateZ(17deg); }
}
@keyframes rotateFall {
    0% { transform: rotateZ(0deg); }
    20% { transform: rotateZ(10deg); animation-timing-function: ease-out; }
    40% { transform: rotateZ(17deg); }
    60% { transform: rotateZ(16deg); }
    100% { transform: translateY(100%) rotateZ(17deg); }
}

/* newspaper */

@-webkit-keyframes rotateOutNewspaper {
    to { -webkit-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}
@-moz-keyframes rotateOutNewspaper {
    to { -moz-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}
@keyframes rotateOutNewspaper {
    to { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}

@-webkit-keyframes rotateInNewspaper {
    from { -webkit-transform: translateZ(-3000px) rotateZ(-360deg); opacity: 0; }
}
@-moz-keyframes rotateInNewspaper {
    from { -moz-transform: translateZ(-3000px) rotateZ(-360deg); opacity: 0; }
}
@keyframes rotateInNewspaper {
    from { transform: translateZ(-3000px) rotateZ(-360deg); opacity: 0; }
}

/* push */

@-webkit-keyframes rotatePushLeft {
    to { opacity: 0; -webkit-transform: rotateY(90deg); }
}
@-moz-keyframes rotatePushLeft {
    to { opacity: 0; -moz-transform: rotateY(90deg); }
}
@keyframes rotatePushLeft {
    to { opacity: 0; transform: rotateY(90deg); }
}

@-webkit-keyframes rotatePushRight {
    to { opacity: 0; -webkit-transform: rotateY(-90deg); }
}
@-moz-keyframes rotatePushRight {
    to { opacity: 0; -moz-transform: rotateY(-90deg); }
}
@keyframes rotatePushRight {
    to { opacity: 0; transform: rotateY(-90deg); }
}

@-webkit-keyframes rotatePushTop {
    to { opacity: 0; -webkit-transform: rotateX(-90deg); }
}
@-moz-keyframes rotatePushTop {
    to { opacity: 0; -moz-transform: rotateX(-90deg); }
}
@keyframes rotatePushTop {
    to { opacity: 0; transform: rotateX(-90deg); }
}

@-webkit-keyframes rotatePushBottom {
    to { opacity: 0; -webkit-transform: rotateX(90deg); }
}
@-moz-keyframes rotatePushBottom {
    to { opacity: 0; -moz-transform: rotateX(90deg); }
}
@keyframes rotatePushBottom {
    to { opacity: 0; transform: rotateX(90deg); }
}

/* pull */

@-webkit-keyframes rotatePullRight {
    from { opacity: 0; -webkit-transform: rotateY(-90deg); }
}
@-moz-keyframes rotatePullRight {
    from { opacity: 0; -moz-transform: rotateY(-90deg); }
}
@keyframes rotatePullRight {
    from { opacity: 0; transform: rotateY(-90deg); }
}

@-webkit-keyframes rotatePullLeft {
    from { opacity: 0; -webkit-transform: rotateY(90deg); }
}
@-moz-keyframes rotatePullLeft {
    from { opacity: 0; -moz-transform: rotateY(90deg); }
}
@keyframes rotatePullLeft {
    from { opacity: 0; transform: rotateY(90deg); }
}

@-webkit-keyframes rotatePullTop {
    from { opacity: 0; -webkit-transform: rotateX(-90deg); }
}
@-moz-keyframes rotatePullTop {
    from { opacity: 0; -moz-transform: rotateX(-90deg); }
}
@keyframes rotatePullTop {
    from { opacity: 0; transform: rotateX(-90deg); }
}

@-webkit-keyframes rotatePullBottom {
    from { opacity: 0; -webkit-transform: rotateX(90deg); }
}
@-moz-keyframes rotatePullBottom {
    from { opacity: 0; -moz-transform: rotateX(90deg); }
}
@keyframes rotatePullBottom {
    from { opacity: 0; transform: rotateX(90deg); }
}

/* fold */

@-webkit-keyframes rotateFoldRight {
    to { opacity: 0; -webkit-transform: translateX(100%) rotateY(90deg); }
}
@-moz-keyframes rotateFoldRight {
    to { opacity: 0; -moz-transform: translateX(100%) rotateY(90deg); }
}
@keyframes rotateFoldRight {
    to { opacity: 0; transform: translateX(100%) rotateY(90deg); }
}

@-webkit-keyframes rotateFoldLeft {
    to { opacity: 0; -webkit-transform: translateX(-100%) rotateY(-90deg); }
}
@-moz-keyframes rotateFoldLeft {
    to { opacity: 0; -moz-transform: translateX(-100%) rotateY(-90deg); }
}
@keyframes rotateFoldLeft {
    to { opacity: 0; transform: translateX(-100%) rotateY(-90deg); }
}

@-webkit-keyframes rotateFoldTop {
    to { opacity: 0; -webkit-transform: translateY(-100%) rotateX(90deg); }
}
@-moz-keyframes rotateFoldTop {
    to { opacity: 0; -moz-transform: translateY(-100%) rotateX(90deg); }
}
@keyframes rotateFoldTop {
    to { opacity: 0; transform: translateY(-100%) rotateX(90deg); }
}

@-webkit-keyframes rotateFoldBottom {
    to { opacity: 0; -webkit-transform: translateY(100%) rotateX(-90deg); }
}
@-moz-keyframes rotateFoldBottom {
    to { opacity: 0; -moz-transform: translateY(100%) rotateX(-90deg); }
}
@keyframes rotateFoldBottom {
    to { opacity: 0; transform: translateY(100%) rotateX(-90deg); }
}

/* unfold */

@-webkit-keyframes rotateUnfoldLeft {
    from { opacity: 0; -webkit-transform: translateX(-100%) rotateY(-90deg); }
}
@-moz-keyframes rotateUnfoldLeft {
    from { opacity: 0; -moz-transform: translateX(-100%) rotateY(-90deg); }
}
@keyframes rotateUnfoldLeft {
    from { opacity: 0; transform: translateX(-100%) rotateY(-90deg); }
}

@-webkit-keyframes rotateUnfoldRight {
    from { opacity: 0; -webkit-transform: translateX(100%) rotateY(90deg); }
}
@-moz-keyframes rotateUnfoldRight {
    from { opacity: 0; -moz-transform: translateX(100%) rotateY(90deg); }
}
@keyframes rotateUnfoldRight {
    from { opacity: 0; transform: translateX(100%) rotateY(90deg); }
}

@-webkit-keyframes rotateUnfoldTop {
    from { opacity: 0; -webkit-transform: translateY(-100%) rotateX(90deg); }
}
@-moz-keyframes rotateUnfoldTop {
    from { opacity: 0; -moz-transform: translateY(-100%) rotateX(90deg); }
}
@keyframes rotateUnfoldTop {
    from { opacity: 0; transform: translateY(-100%) rotateX(90deg); }
}

@-webkit-keyframes rotateUnfoldBottom {
    from { opacity: 0; -webkit-transform: translateY(100%) rotateX(-90deg); }
}
@-moz-keyframes rotateUnfoldBottom {
    from { opacity: 0; -moz-transform: translateY(100%) rotateX(-90deg); }
}
@keyframes rotateUnfoldBottom {
    from { opacity: 0; transform: translateY(100%) rotateX(-90deg); }
}

/* room walls */

@-webkit-keyframes rotateRoomLeftOut {
    to { opacity: .3; -webkit-transform: translateX(-100%) rotateY(90deg); }
}
@-moz-keyframes rotateRoomLeftOut {
    to { opacity: .3; -moz-transform: translateX(-100%) rotateY(90deg); }
}
@keyframes rotateRoomLeftOut {
    to { opacity: .3; transform: translateX(-100%) rotateY(90deg); }
}

@-webkit-keyframes rotateRoomLeftIn {
    from { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); }
}
@-moz-keyframes rotateRoomLeftIn {
    from { opacity: .3; -moz-transform: translateX(100%) rotateY(-90deg); }
}
@keyframes rotateRoomLeftIn {
    from { opacity: .3; transform: translateX(100%) rotateY(-90deg); }
}

@-webkit-keyframes rotateRoomRightOut {
    to { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); }
}
@-moz-keyframes rotateRoomRightOut {
    to { opacity: .3; -moz-transform: translateX(100%) rotateY(-90deg); }
}
@keyframes rotateRoomRightOut {
    to { opacity: .3; transform: translateX(100%) rotateY(-90deg); }
}

@-webkit-keyframes rotateRoomRightIn {
    from { opacity: .3; -webkit-transform: translateX(-100%) rotateY(90deg); }
}
@-moz-keyframes rotateRoomRightIn {
    from { opacity: .3; -moz-transform: translateX(-100%) rotateY(90deg); }
}
@keyframes rotateRoomRightIn {
    from { opacity: .3; transform: translateX(-100%) rotateY(90deg); }
}

@-webkit-keyframes rotateRoomTopOut {
    to { opacity: .3; -webkit-transform: translateY(-100%) rotateX(-90deg); }
}
@-moz-keyframes rotateRoomTopOut {
    to { opacity: .3; -moz-transform: translateY(-100%) rotateX(-90deg); }
}
@keyframes rotateRoomTopOut {
    to { opacity: .3; transform: translateY(-100%) rotateX(-90deg); }
}

@-webkit-keyframes rotateRoomTopIn {
    from { opacity: .3; -webkit-transform: translateY(100%) rotateX(90deg); }
}
@-moz-keyframes rotateRoomTopIn {
    from { opacity: .3; -moz-transform: translateY(100%) rotateX(90deg); }
}
@keyframes rotateRoomTopIn {
    from { opacity: .3; transform: translateY(100%) rotateX(90deg); }
}

@-webkit-keyframes rotateRoomBottomOut {
    to { opacity: .3; -webkit-transform: translateY(100%) rotateX(90deg); }
}
@-moz-keyframes rotateRoomBottomOut {
    to { opacity: .3; -moz-transform: translateY(100%) rotateX(90deg); }
}
@keyframes rotateRoomBottomOut {
    to { opacity: .3; transform: translateY(100%) rotateX(90deg); }
}

@-webkit-keyframes rotateRoomBottomIn {
    from { opacity: .3; -webkit-transform: translateY(-100%) rotateX(-90deg); }
}
@-moz-keyframes rotateRoomBottomIn {
    from { opacity: .3; -moz-transform: translateY(-100%) rotateX(-90deg); }
}
@keyframes rotateRoomBottomIn {
    from { opacity: .3; transform: translateY(-100%) rotateX(-90deg); }
}

/* cube */

@-webkit-keyframes rotateCubeLeftOut {
    50% { -webkit-animation-timing-function: ease-out;  -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); }
    100% { opacity: .3; -webkit-transform: translateX(-100%) rotateY(-90deg); }
}
@-moz-keyframes rotateCubeLeftOut {
    50% { -moz-animation-timing-function: ease-out;  -moz-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); }
    100% { opacity: .3; -moz-transform: translateX(-100%) rotateY(-90deg); }
}
@keyframes rotateCubeLeftOut {
    50% { animation-timing-function: ease-out;  transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); }
    100% { opacity: .3; 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); }
}
@-moz-keyframes rotateCubeLeftIn {
    0% { opacity: .3; -moz-transform: translateX(100%) rotateY(90deg); }
    50% { -moz-animation-timing-function: ease-out;  -moz-transform: translateX(50%) translateZ(-200px) rotateY(45deg); }
}
@keyframes rotateCubeLeftIn {
    0% { opacity: .3; transform: translateX(100%) rotateY(90deg); }
    50% { animation-timing-function: ease-out;  transform: translateX(50%) translateZ(-200px) rotateY(45deg); }
}

@-webkit-keyframes rotateCubeRightOut {
    50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg); }
    100% { opacity: .3; -webkit-transform: translateX(100%) rotateY(90deg); }
}
@-moz-keyframes rotateCubeRightOut {
    50% { -moz-animation-timing-function: ease-out; -moz-transform: translateX(50%) translateZ(-200px) rotateY(45deg); }
    100% { opacity: .3; -moz-transform: translateX(100%) rotateY(90deg); }
}
@keyframes rotateCubeRightOut {
    50% { animation-timing-function: ease-out; transform: translateX(50%) translateZ(-200px) rotateY(45deg); }
    100% { opacity: .3; 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); }
}
@-moz-keyframes rotateCubeRightIn {
    0% { opacity: .3; -moz-transform: translateX(-100%) rotateY(-90deg); }
    50% { -moz-animation-timing-function: ease-out; -moz-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); }
}
@keyframes rotateCubeRightIn {
    0% { opacity: .3; transform: translateX(-100%) rotateY(-90deg); }
    50% { animation-timing-function: ease-out; transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); }
}

@-webkit-keyframes rotateCubeTopOut {
    50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
    100% { opacity: .3; -webkit-transform: translateY(-100%) rotateX(90deg); }
}
@-moz-keyframes rotateCubeTopOut {
    50% { -moz-animation-timing-function: ease-out; -moz-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
    100% { opacity: .3; -moz-transform: translateY(-100%) rotateX(90deg); }
}
@keyframes rotateCubeTopOut {
    50% { animation-timing-function: ease-out; transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
    100% { opacity: .3; 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); }
}
@-moz-keyframes rotateCubeTopIn {
    0% { opacity: .3; -moz-transform: translateY(100%) rotateX(-90deg); }
    50% { -moz-animation-timing-function: ease-out; -moz-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
}
@keyframes rotateCubeTopIn {
    0% { opacity: .3; transform: translateY(100%) rotateX(-90deg); }
    50% { animation-timing-function: ease-out; transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
}

@-webkit-keyframes rotateCubeBottomOut {
    50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
    100% { opacity: .3; -webkit-transform: translateY(100%) rotateX(-90deg); }
}
@-moz-keyframes rotateCubeBottomOut {
    50% { -moz-animation-timing-function: ease-out; -moz-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
    100% { opacity: .3; -moz-transform: translateY(100%) rotateX(-90deg); }
}
@keyframes rotateCubeBottomOut {
    50% { animation-timing-function: ease-out; transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
    100% { opacity: .3; 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); }
}
@-moz-keyframes rotateCubeBottomIn {
    0% { opacity: .3; -moz-transform: translateY(-100%) rotateX(90deg); }
    50% { -moz-animation-timing-function: ease-out; -moz-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
}
@keyframes rotateCubeBottomIn {
    0% { opacity: .3; transform: translateY(-100%) rotateX(90deg); }
    50% { animation-timing-function: ease-out; transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
}

/* carousel */

@-webkit-keyframes rotateCarouselLeftOut {
    to { opacity: .3; -webkit-transform: translateX(-150%) scale(.4) rotateY(-65deg); }
}
@-moz-keyframes rotateCarouselLeftOut {
    to { opacity: .3; -moz-transform: translateX(-150%) scale(.4) rotateY(-65deg); }
}
@keyframes rotateCarouselLeftOut {
    to { opacity: .3; transform: translateX(-150%) scale(.4) rotateY(-65deg); }
}

@-webkit-keyframes rotateCarouselLeftIn {
    from { opacity: .3; -webkit-transform: translateX(200%) scale(.4) rotateY(65deg); }
}
@-moz-keyframes rotateCarouselLeftIn {
    from { opacity: .3; -moz-transform: translateX(200%) scale(.4) rotateY(65deg); }
}
@keyframes rotateCarouselLeftIn {
    from { opacity: .3; transform: translateX(200%) scale(.4) rotateY(65deg); }
}

@-webkit-keyframes rotateCarouselRightOut {
    to { opacity: .3; -webkit-transform: translateX(200%) scale(.4) rotateY(65deg); }
}
@-moz-keyframes rotateCarouselRightOut {
    to { opacity: .3; -moz-transform: translateX(200%) scale(.4) rotateY(65deg); }
}
@keyframes rotateCarouselRightOut {
    to { opacity: .3; transform: translateX(200%) scale(.4) rotateY(65deg); }
}

@-webkit-keyframes rotateCarouselRightIn {
    from { opacity: .3; -webkit-transform: translateX(-200%) scale(.4) rotateY(-65deg); }
}
@-moz-keyframes rotateCarouselRightIn {
    from { opacity: .3; -moz-transform: translateX(-200%) scale(.4) rotateY(-65deg); }
}
@keyframes rotateCarouselRightIn {
    from { opacity: .3; transform: translateX(-200%) scale(.4) rotateY(-65deg); }
}

@-webkit-keyframes rotateCarouselTopOut {
    to { opacity: .3; -webkit-transform: translateY(-200%) scale(.4) rotateX(65deg); }
}
@-moz-keyframes rotateCarouselTopOut {
    to { opacity: .3; -moz-transform: translateY(-200%) scale(.4) rotateX(65deg); }
}
@keyframes rotateCarouselTopOut {
    to { opacity: .3; transform: translateY(-200%) scale(.4) rotateX(65deg); }
}

@-webkit-keyframes rotateCarouselTopIn {
    from { opacity: .3; -webkit-transform: translateY(200%) scale(.4) rotateX(-65deg); }
}
@-moz-keyframes rotateCarouselTopIn {
    from { opacity: .3; -moz-transform: translateY(200%) scale(.4) rotateX(-65deg); }
}
@keyframes rotateCarouselTopIn {
    from { opacity: .3; transform: translateY(200%) scale(.4) rotateX(-65deg); }
}

@-webkit-keyframes rotateCarouselBottomOut {
    to { opacity: .3; -webkit-transform: translateY(200%) scale(.4) rotateX(-65deg); }
}
@-moz-keyframes rotateCarouselBottomOut {
    to { opacity: .3; -moz-transform: translateY(200%) scale(.4) rotateX(-65deg); }
}
@keyframes rotateCarouselBottomOut {
    to { opacity: .3; transform: translateY(200%) scale(.4) rotateX(-65deg); }
}

@-webkit-keyframes rotateCarouselBottomIn {
    from { opacity: .3; -webkit-transform: translateY(-200%) scale(.4) rotateX(65deg); }
}
@-moz-keyframes rotateCarouselBottomIn {
    from { opacity: .3; -moz-transform: translateY(-200%) scale(.4) rotateX(65deg); }
}
@keyframes rotateCarouselBottomIn {
    from { opacity: .3; transform: translateY(-200%) scale(.4) rotateX(65deg); }
}

/* sides */

@-webkit-keyframes rotateSidesOut {
    to { opacity: 0; -webkit-transform: translateZ(-500px) rotateY(90deg); }
}
@-moz-keyframes rotateSidesOut {
    to { opacity: 0; -moz-transform: translateZ(-500px) rotateY(90deg); }
}
@keyframes rotateSidesOut {
    to { opacity: 0; transform: translateZ(-500px) rotateY(90deg); }
}

@-webkit-keyframes rotateSidesIn {
    from { opacity: 0; -webkit-transform: translateZ(-500px) rotateY(-90deg); }
}
@-moz-keyframes rotateSidesIn {
    from { opacity: 0; -moz-transform: translateZ(-500px) rotateY(-90deg); }
}
@keyframes rotateSidesIn {
    from { opacity: 0; transform: translateZ(-500px) rotateY(-90deg); }
}

/* slide */

@-webkit-keyframes rotateSlideOut {
    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%); }
}
@-moz-keyframes rotateSlideOut {
    25% { opacity: .5; -moz-transform: translateZ(-500px); }
    75% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); }
    100% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); }
}
@keyframes rotateSlideOut {
    25% { opacity: .5; transform: translateZ(-500px); }
    75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
    100% { opacity: .5; 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); }
}
@-moz-keyframes rotateSlideIn {
    0%, 25% { opacity: .5; -moz-transform: translateZ(-500px) translateX(200%); }
    75% { opacity: .5; -moz-transform: translateZ(-500px); }
    100% { opacity: 1; -moz-transform: translateZ(0) translateX(0); }
}
@keyframes rotateSlideIn {
    0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); }
    75% { opacity: .5; transform: translateZ(-500px); }
    100% { opacity: 1; transform: translateZ(0) translateX(0); }
}

/* animation delay classes */

.pt-page-delay100 {
    -webkit-animation-delay: .1s;
    -moz-animation-delay: .1s;
    animation-delay: .1s;
}
.pt-page-delay180 {
    -webkit-animation-delay: .180s;
    -moz-animation-delay: .180s;
    animation-delay: .180s;
}
.pt-page-delay200 {
    -webkit-animation-delay: .2s;
    -moz-animation-delay: .2s;
    animation-delay: .2s;
}
.pt-page-delay300 {
    -webkit-animation-delay: .3s;
    -moz-animation-delay: .3s;
    animation-delay: .3s;
}
.pt-page-delay400 {
    -webkit-animation-delay: .4s;
    -moz-animation-delay: .4s;
    animation-delay: .4s;
}
.pt-page-delay500 {
    -webkit-animation-delay: .5s;
    -moz-animation-delay: .5s;
    animation-delay: .5s;
}
.pt-page-delay700 {
    -webkit-animation-delay: .7s;
    -moz-animation-delay: .7s;
    animation-delay: .7s;
}
.pt-page-delay1000 {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    animation-delay: 1s;
}

</style>
</head>
<body>

<p>If you click on the "Hide" button, I will disappear.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>
<div class="pt-page-rotateSidesIn">
Hllo This is wwe monday night row
Hllo This is wwe monday night row

Hllo This is wwe monday night row

Hllo This is wwe monday night row


Hllo This is wwe monday night row

Hllo This is wwe monday night row


Hllo This is wwe monday night row


Hllo This is wwe monday night row

Hllo This is wwe monday night row
Hllo This is wwe monday night row
</div>

<div class="pt-page-flipOutRight">
Hllo This is wwe monday night row
Hllo This is wwe monday night row

Hllo This is wwe monday night row

Hllo This is wwe monday night row


Hllo This is wwe monday night row

Hllo This is wwe monday night row


Hllo This is wwe monday night row


Hllo This is wwe monday night row

Hllo This is wwe monday night row
Hllo This is wwe monday night row
</div>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

High light Search Result In Wordpress

High light Search Result In Wordpress add this function in your themes function.php function highlight_results ( $ text ) {      if ( is_search ( ) ) { $ keys = implode ( '|' , explode ( ' ' , get_search_query ( ) ) ) ; $ text = preg_replace ( '/(' . $ keys . ')/iu' , '<span class="search-highlight">\0</span>' , $ text ) ;      }      return $ text ; } add_filter ( 'the_content' , 'highlight_results' ) ; add_filter ( 'the_excerpt' , 'highlight_results' ) ; add_filter ( 'the_title' , 'highlight_results' ) ;   function highlight_results_css ( ) { ? > <style> .search-highlight { background-color : #FF0 ; font-weight : bold ; } </style> < ? php } add_action ( 'wp_head' , 'highlight_results_css' ) ;
5 comments
Read more

Redirect In contact form 7

add_action( 'wp_footer' , 'redirect_cf7' ); function redirect_cf7() { ?> < script type = "text/javascript" > document.addEventListener( 'wpcf7mailsent' , function ( event ) { if ( '1377' == event.detail.contactFormId ) { // Sends sumissions on form 947 to the first thank you page location = 'https://www.panelesyceldassolares.com/regreso' ; } else { // Sends submissions on all unaccounted for forms to the third thank you page location = 'https://www.panelesyceldassolares.com/regreso-2/' ; } }, false ); </ script > <?php }
Post a Comment
Read more

Get Single Product By ID in Opencart

<?php if(!empty($_POST["country_id"])) {     $query ="SELECT * FROM oc_product WHERE product_id = '" . $_POST["country_id"] . "'";     $results = $this->db->query($query);   $query2 ="SELECT * FROM oc_product_description WHERE product_id = '" . $_POST["country_id"] . "'";   $results2 = $this->db->query($query2);   $rowresults2 = $results2->row;   $rowresults = $results->row;   $name1 = $rowresults['model'];   $name2 = $rowresults2['name'];   $name3 = $rowresults['price'];   $name4 = 'Exe.' ?>
Post a Comment
Read more