You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
2.1 KiB
130 lines
2.1 KiB
@import "../../../index.less"; |
|
|
|
.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; |
|
} |
|
});
|
|
|