.animationParent {
  .perspective(800);
  .transform-style(preserve-3d);
  -webkit-transform-style: preserve-3d; // We have to remove this property after animation, otherwise the dialog widget is not shown in Chrome. See Bug #5891.
}

.animationChild {
  .backface-visibility(hidden);
  position: absolute; // We have to remove this property after animation, otherwise the list widget is not shown in Webkit Browsers. See Bug #5935.
}

.in {
  z-index: 10;
}

.out {
  z-index: 0;
}

.in, .out {
  .animation-timing-function(ease-in-out);
  .animation-duration(350ms);
  .animation-fill-mode(both); // Apply first and persist the last frame of the animation
}

.keyframes-mixin (@name, @frames) {
 
}

//
// SLIDE LEFT
//

.slide.in {
  .animation-name(slideLeftIn);  
}

.slide.out {
  .animation-name(slideLeftOut);
}

.slideLeftInFrames() { 
  0% {
      .transform(translateX(100%));
  }
  100% {
      .transform(translateX(0));
  } 
}
 
.slideLeftOutFrames() {
  0% {
      .transform(translateX(0px)) ;
  }
  100% {
      .transform(translateX(-100%));
  } 
}

@-webkit-keyframes slideLeftIn {.slideLeftInFrames()}
@-moz-keyframes slideLeftIn {.slideLeftInFrames()}
@keyframes slideLeftIn {.slideLeftInFrames()} 

@-webkit-keyframes slideLeftOut {.slideLeftOutFrames()}
@-moz-keyframes slideLeftOut {.slideLeftOutFrames()}
@keyframes slideLeftOut {.slideLeftOutFrames()}
 
//
// SLIDE RIGHT
//

.slide.in.reverse {
    .animation-name(slideRightIn);
} 
 
.slide.out.reverse {
    .animation-name(slideRightOut);
}
 
.slideRightInFrames() {
    0% {
        .transform(translateX(-100%)); 
    }
    100% {
        .transform(translateX(0));
    }
}

.slideRightOutFrames() {
    0% {
        .transform(translateX(0));
    }
    100% {
        .transform(translateX(100%));
    }
}

@-webkit-keyframes slideRightIn {.slideRightInFrames()}
@-moz-keyframes slideRightIn {.slideRightInFrames()}
@keyframes slideRightIn {.slideRightInFrames()} 

@-webkit-keyframes slideRightOut {.slideRightOutFrames()}
@-moz-keyframes slideRightOut {.slideRightOutFrames()}
@keyframes slideRightOut {.slideRightOutFrames()}



//
// FADE
//

.fade.in {
    .animation-name(fadeIn);
}

.fade.out {
    .animation-name(fadeOut);
}

.fadeInFrames() {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fadeOutFrames() {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes fadeIn {.fadeInFrames()}
@-moz-keyframes fadeIn {.fadeInFrames()}
@keyframes fadeIn {.fadeInFrames()} 

@-webkit-keyframes fadeOut {.fadeOutFrames()}
@-moz-keyframes fadeOut {.fadeOutFrames()}
@keyframes fadeOut {.fadeOutFrames()}

//
// POP
//

.pop.in {
    .animation-name(popIn);
}

.pop.out {
    .animation-name(popOut);
}

.popInFrames() {
    0% {
        .transform(scale(.2));
        opacity: 0;
    }
    100% {
        .transform(scale(1));
        opacity: 1;
    }
}

.popOutFrames() {
    0% {
        .transform(scale(1));
        opacity: 1;
    }
    100% {
        .transform(scale(.2));
        opacity: 0;
    }
}

@-webkit-keyframes popIn {.popInFrames()}
@-moz-keyframes popIn {.popInFrames()}
@keyframes popIn {.popInFrames()} 

@-webkit-keyframes popOut {.popOutFrames()}
@-moz-keyframes popOut {.popOutFrames()}
@keyframes popOut {.popOutFrames()}

//
// DISSOLVE
//

.dissolve.in {
    .animation-name(dissolveIn);
}

.dissolve.out {
    .animation-name(dissolveOut);
}

.dissolveInFrames() {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.dissolveOutFrames() {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes dissolveIn {.dissolveInFrames()}
@-moz-keyframes dissolveIn {.dissolveInFrames()}
@keyframes dissolveIn {.dissolveInFrames()} 

@-webkit-keyframes dissolveOut {.dissolveOutFrames()}
@-moz-keyframes dissolveOut {.dissolveOutFrames()}
@keyframes dissolveOut {.dissolveOutFrames()}

//
// SLIDE UP
//

.slideup.in {
    z-index: 10;
    .animation-name(slideUpIn);
}

.slideup.out {
    z-index: 0;
    .animation-name(slideUpOut);
}

.slideUpInFrames() {
    0% {
        .transform(translateY(100%));
    }
    100% {
        .transform(translateY(0));
    }
}

.slideUpOutFrames() {
    0% {
        .transform(translateY(0));
    }
    100% {
        .transform(translateY(0));
    }
}

@-webkit-keyframes slideUpIn {.slideUpInFrames()}
@-moz-keyframes slideUpIn {.slideUpInFrames()}
@keyframes slideUpIn {.slideUpInFrames()} 

@-webkit-keyframes slideUpOut {.slideUpOutFrames()}
@-moz-keyframes slideUpOut {.slideUpOutFrames()}
@keyframes slideUpOut {.slideUpOutFrames()}


.slideup.in.reverse {
  z-index: 0;
  .animation-name(slideDownIn);
}

.slideup.out.reverse {
  z-index: 10;
  .animation-name(slideDownOut);
}

.slideDownInFrames() {
    0% {
        .transform(translateY(0));
    }
    100% {
        .transform(translateY(0));
    }
}

.slideDownOutFrames() {
    0% {
        .transform(translateY(0));
    }
    100% {
        .transform(translateY(100%));
    }
}

@-webkit-keyframes slideDownIn {.slideDownInFrames()}
@-moz-keyframes slideDownIn {.slideDownInFrames()}
@keyframes slideDownIn {.slideDownInFrames()} 

@-webkit-keyframes slideDownOut {.slideDownOutFrames()}
@-moz-keyframes slideDownOut {.slideDownOutFrames()}
@keyframes slideDownOut {.slideDownOutFrames()}

//
// FLIP LEFT
//

.flip {
  .backface-visibility(hidden);
}

.flip.in {
  .animation-name(flipLeftIn);
}

.flip.out {
  .animation-name(flipLeftOut);
}

.flipLeftInFrames() {
    0% {
        .transform(rotateY(180deg) scale(.8));
    }
    100% {
        .transform(rotateY(0deg) scale(1));
    }
}

.flipLeftOutFrames() {
    0% {
        .transform(rotateY(0deg) scale(1));
    }
    100% {
        .transform(rotateY(-180deg) scale(.8));
    }
}

@-webkit-keyframes flipLeftIn {.flipLeftInFrames()}
@-moz-keyframes flipLeftIn {.flipLeftInFrames()}
@keyframes flipLeftIn {.flipLeftInFrames()} 

@-webkit-keyframes flipLeftOut {.flipLeftOutFrames()}
@-moz-keyframes flipLeftOut {.flipLeftOutFrames()}
@keyframes flipLeftOut {.flipLeftOutFrames()}

//
// FLIP RIGHT
//

.flip.in.reverse {
    .animation-name(flipRightIn);
}

.flip.out.reverse {
    .animation-name(flipRightOut);
}

.flipRightInFrames() {
    0% {
        .transform(rotateY(-180deg) scale(.8));
    }
    100% {
        .transform(rotateY(0deg) scale(1));
    }
}

.flipRightOutFrames() {
    0% {
        .transform(rotateY(0deg) scale(1));
    }
    100% {
        .transform(rotateY(180deg) scale(.8));
    }
}

@-webkit-keyframes flipRightIn {.flipRightInFrames()}
@-moz-keyframes flipRightIn {.flipRightInFrames()}
@keyframes flipRightIn {.flipRightInFrames()} 

@-webkit-keyframes flipRightOut {.flipRightOutFrames()}
@-moz-keyframes flipRightOut {.flipRightOutFrames()}
@keyframes flipRightOut {.flipRightOutFrames()}


//
// SWAP LEFT
//

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

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

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

@-webkit-keyframes swapLeftIn {.swapLeftInFrames()}
@-moz-keyframes swapLeftIn {.swapLeftInFrames()}
@keyframes swapLeftIn {.swapLeftInFrames()} 

@-webkit-keyframes swapLeftOut {.swapLeftOutFrames()}
@-moz-keyframes swapLeftOut {.swapLeftOutFrames()}
@keyframes swapLeftOut {.swapLeftOutFrames()}

//
// SWAP RIGHT
//

.swap.in.reverse {
    .animation-name(swapRightIn);
}
.swap.out.reverse {
    .animation-name(swapRightOut);
}

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

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

@-webkit-keyframes swapRightIn {.swapRightInFrames()}
@-moz-keyframes swapRightIn {.swapRightInFrames()}
@keyframes swapRightIn {.swapRightInFrames()} 

@-webkit-keyframes swapRightOut {.swapRightOutFrames()}
@-moz-keyframes swapRightOut {.swapRightOutFrames()}
@keyframes swapRightOut {.swapRightOutFrames()}

//
// CUBE LEFT
//

@cube-z-target: 0px;

.cube {
    .animation-duration(.55s);
}

.cube.in {
    .transform-origin(100% 50%);
    .animation-name(cubeLeftIn);
}

.cube.out {
    .transform-origin(0% 50%);
    .animation-name(cubeLeftOut);
}

.cubeLeftInFrames() {
    0% {
        .transform(rotateY(90deg) translateZ(@cube-z-target) scale(.5));
        opacity: .5;
    }
    100% {
        .transform(rotateY(00deg) translateZ(0) scale(1));
        opacity: 1;
    }
}

.cubeLeftOutFrames() {
    0% {
        .transform(rotateY(0deg) translateX(0) scale(1));
        opacity: 1;
    }
    100% {
        .transform(rotateY(-90deg) translateZ(@cube-z-target) scale(.5));
        opacity: .5;
    }
}

@-webkit-keyframes cubeLeftIn {.cubeLeftInFrames()}
@-moz-keyframes cubeLeftIn {.cubeLeftInFrames()}
@keyframes cubeLeftIn {.cubeLeftInFrames()} 

@-webkit-keyframes cubeLeftOut {.cubeLeftOutFrames()}
@-moz-keyframes cubeLeftOut {.cubeLeftOutFrames()}
@keyframes cubeLeftOut {.cubeLeftOutFrames()}

//
// CUBE RIGHT
//

.cube.in.reverse {
    .transform-origin(0% 50%);
    .animation-name(cubeRightIn);
}

.cube.out.reverse {
    .transform-origin(100% 50%);
    .animation-name(cubeRightOut);
}

.cubeRightInFrames() {
    0% {
        .transform(rotateY(-90deg) translateZ(@cube-z-target) scale(.5));
        opacity: .5;
    }
    100% {
        .transform(rotateY(0deg) translateZ(0) scale(1));
        opacity: 1;
    }
}

.cubeRightOutFrames() {
    0% {
        .transform(rotateY(0deg) translateX(0) scale(1));
        opacity: 1;
    }
    100% {
        .transform(rotateY(90deg) translateZ(@cube-z-target) scale(.5));
        opacity: .5;
    }
}

@-webkit-keyframes cubeRightIn {.cubeRightInFrames()}
@-moz-keyframes cubeRightIn {.cubeRightInFrames()}
@keyframes cubeRightIn {.cubeRightInFrames()} 

@-webkit-keyframes cubeRightOut {.cubeRightOutFrames()}
@-moz-keyframes cubeRightOut {.cubeRightOutFrames()}
@keyframes cubeRightOut {.cubeRightOutFrames()}
