/* Cube Left */

.cubeleft.in,.cubeleft.out,.cuberight.in, .cuberight.out {
    -webkit-animation-duration:.6s;
    -webkit-transform: perspective(800);   
}

.cubeleft.in {
    -webkit-transform-origin: 0% 50%;
    -webkit-animation-name: cubeLeftIn;
}

.cubeleft.out {
    -webkit-transform-origin: 100% 50%;
    -webkit-animation-name: cubeLeftOut;    
}

@-webkit-keyframes cubeLeftIn {
    0% {
        -webkit-transform: rotateY(90deg) translateZ(320px);
        opacity:.5;
    }
    100% {
        -webkit-transform: rotateY(0deg) translateZ(0) translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes cubeLeftOut {
    0% {
        -webkit-transform: rotateY(0deg) translateZ(0) translateX(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotateY(-90deg) translateZ(320px);
        opacity:.5;
    }
}

/* Cube Right */

.cuberight.in {
    -webkit-transform-origin: 100% 50%;
    -webkit-animation-name: cubeRightIn;
}

.cuberight.out {
    -webkit-transform-origin: 0% 50%;
    -webkit-animation-name: cubeRightOut;    
}

@-webkit-keyframes cubeRightIn {
    0% {
        -webkit-transform: rotateY(-90deg) translateZ(320px);
        opacity:.5;
    }
    100% {
        -webkit-transform: rotateY(0deg) translateZ(0) translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes cubeRightOut {
    0% {
        -webkit-transform: rotateY(0deg) translateZ(0) translateX(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotateY(90deg) translateZ(320px);
        opacity:.5;
    }
}