/* Swap Right */
.swapright {
    -webkit-animation-duration:.7s;
    -webkit-transform: perspective(800);
    -webkit-animation-timing-function: ease-out;
}
.swapright.in {
    -webkit-animation-name: swapRightIn;
}
.swapright.out {
    -webkit-animation-name: swapRightOut;
}

@-webkit-keyframes swapRightIn {
    0% {
        -webkit-transform: translate3d(0px, 0px, -800px) rotateY(70deg);
        opacity: 0;
    }
    35% {
        -webkit-transform: translate3d(-180px, 0px, -400px) rotateY(20deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
        opacity: 1;
    }
}

@-webkit-keyframes swapRightOut {
    0% {
        -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
        opacity: 1;
    }
    35% {
        -webkit-transform:  translate3d(180px, 0px, -400px) rotateY(-20deg);
        opacity:.5;
    }
    100% {
        -webkit-transform: translate3d(0px, 0px, -800px) rotateY(-70deg);
        opacity: 0;
    }
}

/* Swap Left */

.swapleft {
    -webkit-animation-duration:.7s;
    -webkit-transform: perspective(800);
    -webkit-animation-timing-function: ease-out;
}
.swapleft.in {
    -webkit-animation-name: swapLeftIn;
}
.swapleft.out {
    -webkit-animation-name: swapLeftOut;
}

@-webkit-keyframes swapLeftIn {
    0% {
        -webkit-transform: translate3d(0px, 0px, -800px) rotateY(-70deg);
        opacity: 0;
    }
    35% {
        -webkit-transform: translate3d(180px, 0px, -400px) rotateY(-20deg);
        opacity: 1;
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
    }
}

@-webkit-keyframes swapLeftOut {
    0% {
        -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
        opacity: 1;
    }
    35% {
        -webkit-transform: translate3d(-180px, 0px, -400px) rotateY(20deg);
        opacity:.5;
    }
    100% {
        -webkit-transform:  translate3d(0px, 0px, -800px) rotateY(70deg);
        opacity: 0;
    }
}
