|
|
|
|
@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;}
|
|
|
|
|
//});
|
