@import "../../../index";

.move-motion(@className, @keyframeName) {
  .make-motion(@className, @keyframeName);
  .@{className}-enter,
  .@{className}-appear {
    opacity: 0;
    animation-timing-function: @ease-out-circ;
  }
  .@{className}-leave {
    animation-timing-function: @ease-in-circ;
  }
}

.move-motion(bi-move-up, biMoveUp);
.move-motion(bi-move-down, biMoveDown);
.move-motion(bi-move-left, biMoveLeft);
.move-motion(bi-move-right, biMoveRight);

//.keyframes(biMoveDownIn, {
//  0% {transform: translateY(100%);transform-origin: 0 0;opacity: 0;}
//  100% {transform: translateY(0%);transform-origin: 0 0;opacity: 1;}
//});
//
//.keyframes(biMoveDownOut, {
//  0% {transform: translateY(0%);transform-origin: 0 0;opacity: 1;}
//  100% {transform: translateY(100%);transform-origin: 0 0;opacity: 0;}
//});
//
//.keyframes(biMoveLeftIn, {
//  0% {transform: translateX(-100%);transform-origin: 0 0;opacity: 0;}
//  100% {transform: translateX(0%);transform-origin: 0 0;opacity: 1;}
//});
//
//.keyframes(biMoveLeftOut, {
//  0% {transform: translateX(0%);transform-origin: 0 0;opacity: 1;}
//  100% {transform: translateX(-100%);transform-origin: 0 0;opacity: 0;}
//});
//
//.keyframes(biMoveRightIn, {
//  0% {transform: translateX(100%);transform-origin: 0 0;opacity: 0;}
//  100% {transform: translateX(0%);transform-origin: 0 0;opacity: 1;}
//});
//
//.keyframes(biMoveRightOut, {
//  0% {transform: translateX(0%);transform-origin: 0 0;opacity: 1;}
//  100% {transform: translateX(100%);transform-origin: 0 0;opacity: 0;}
//});
//
//.keyframes(biMoveUpIn, {
//  0% {transform: translateY(-100%);transform-origin: 0 0;opacity: 0;}
//  100% {transform: translateY(0%);transform-origin: 0 0;opacity: 1;}
//});
//
//.keyframes(biMoveUpOut, {
//  0% {transform: translateY(0%);transform-origin: 0 0;opacity: 1;}
//  100% {transform: translateY(-100%);transform-origin: 0 0;opacity: 0;}
//});