ant-design/style/core/motion/slide.less
2015-07-01 17:25:16 +08:00

119 lines
2.0 KiB
Plaintext

.slide-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName);
.@{className}-enter {
opacity: 0;
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
}
.@{className}-leave {
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
}
}
.slide-motion(slide-up, slideUp);
.slide-motion(slide-down, slideDown);
.slide-motion(slide-left, slideLeft);
.slide-motion(slide-right, slideRight);
@keyframes slideUpIn {
0% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(0);
}
100% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1);
}
}
@keyframes slideUpOut {
0% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1);
}
100% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(0);
}
}
@keyframes slideDownIn {
0% {
opacity: 0;
transform-origin: 100% 100%;
transform: scaleY(0);
}
100% {
opacity: 1;
transform-origin: 100% 100%;
transform: scaleY(1);
}
}
@keyframes slideDownOut {
0% {
opacity: 1;
transform-origin: 100% 100%;
transform: scaleY(1);
}
100% {
opacity: 0;
transform-origin: 100% 100%;
transform: scaleY(0);
}
}
@keyframes slideLeftIn {
0% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleX(0);
}
100% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleX(1);
}
}
@keyframes slideLeftOut {
0% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleX(1);
}
100% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleX(0);
}
}
@keyframes slideRightIn {
0% {
opacity: 0;
transform-origin: 100% 0%;
transform: scaleX(0);
}
100% {
opacity: 1;
transform-origin: 100% 0%;
transform: scaleX(1);
}
}
@keyframes slideRightOut {
0% {
opacity: 1;
transform-origin: 100% 0%;
transform: scaleX(1);
}
100% {
opacity: 0;
transform-origin: 100% 0%;
transform: scaleX(0);
}
}