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"; |
|
|
|
.slide-motion(@className, @keyframeName) { |
|
.make-motion(@className, @keyframeName); |
|
.@{className}-enter, |
|
.@{className}-appear { |
|
opacity: 0; |
|
animation-timing-function: @ease-out-quint; |
|
} |
|
.@{className}-leave { |
|
animation-timing-function: @ease-in-quint; |
|
} |
|
} |
|
|
|
.slide-motion(bi-slide-up, biSlideUp); |
|
.slide-motion(bi-slide-down, biSlideDown); |
|
.slide-motion(bi-slide-left, biSlideLeft); |
|
.slide-motion(bi-slide-right, biSlideRight); |
|
|
|
.keyframes(biSlideUpIn, { |
|
0% { |
|
transform: scaleY(0.8); |
|
transform-origin: 0% 0%; |
|
opacity: 0; |
|
} |
|
|
|
100% { |
|
transform: scaleY(1); |
|
transform-origin: 0% 0%; |
|
opacity: 1; |
|
} |
|
}); |
|
|
|
.keyframes(biSlideUpOut, { |
|
0% { |
|
transform: scaleY(1); |
|
transform-origin: 0% 0%; |
|
opacity: 1; |
|
} |
|
|
|
100% { |
|
transform: scaleY(0.8); |
|
transform-origin: 0% 0%; |
|
opacity: 0; |
|
} |
|
}); |
|
|
|
.keyframes(biSlideDownIn, { |
|
0% { |
|
transform: scaleY(0.8); |
|
transform-origin: 100% 100%; |
|
opacity: 0; |
|
} |
|
|
|
100% { |
|
transform: scaleY(1); |
|
transform-origin: 100% 100%; |
|
opacity: 1; |
|
} |
|
}); |
|
|
|
.keyframes(biSlideDownOut, { |
|
0% { |
|
transform: scaleY(1); |
|
transform-origin: 100% 100%; |
|
opacity: 1; |
|
} |
|
|
|
100% { |
|
transform: scaleY(0.8); |
|
transform-origin: 100% 100%; |
|
opacity: 0; |
|
} |
|
}); |
|
|
|
.keyframes(biSlideLeftIn, { |
|
0% { |
|
transform: scaleX(0.8); |
|
transform-origin: 0% 0%; |
|
opacity: 0; |
|
} |
|
|
|
100% { |
|
transform: scaleX(1); |
|
transform-origin: 0% 0%; |
|
opacity: 1; |
|
} |
|
}); |
|
|
|
.keyframes(biSlideLeftOut, { |
|
0% { |
|
transform: scaleX(1); |
|
transform-origin: 0% 0%; |
|
opacity: 1; |
|
} |
|
|
|
100% { |
|
transform: scaleX(0.8); |
|
transform-origin: 0% 0%; |
|
opacity: 0; |
|
} |
|
}); |
|
|
|
.keyframes(biSlideRightIn, { |
|
0% { |
|
transform: scaleX(0.8); |
|
transform-origin: 100% 0%; |
|
opacity: 0; |
|
} |
|
|
|
100% { |
|
transform: scaleX(1); |
|
transform-origin: 100% 0%; |
|
opacity: 1; |
|
} |
|
}); |
|
|
|
.keyframes(biSlideRightOut, { |
|
0% { |
|
transform: scaleX(1); |
|
transform-origin: 100% 0%; |
|
opacity: 1; |
|
} |
|
|
|
100% { |
|
transform: scaleX(0.8); |
|
transform-origin: 100% 0%; |
|
opacity: 0; |
|
} |
|
});
|
|
|