forked from fanruan/fineui
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.
131 lines
2.0 KiB
131 lines
2.0 KiB
@import "../../../index"; |
|
|
|
.move-motion(@className, @keyframeName) { |
|
@name: ~'bi-@{className}'; |
|
.make-motion(@name, @keyframeName); |
|
.@{name}-enter, |
|
.@{name}-appear { |
|
opacity: 0; |
|
animation-timing-function: @ease-out-circ; |
|
} |
|
.@{name}-leave { |
|
animation-timing-function: @ease-in-circ; |
|
} |
|
} |
|
|
|
.move-motion(move-up, biMoveUp); |
|
.move-motion(move-down, biMoveDown); |
|
.move-motion(move-left, biMoveLeft); |
|
.move-motion(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; |
|
} |
|
}
|
|
|