ant-design/style/core/motion/zoom.less

148 lines
2.4 KiB
Plaintext
Raw Normal View History

2015-07-01 17:25:16 +08:00
.zoom-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName);
.@{className}-enter {
opacity: 0;
2015-07-10 14:27:12 +08:00
animation-timing-function: @ease-out-circ;
2015-07-01 17:25:16 +08:00
}
.@{className}-leave {
2015-07-10 14:27:12 +08:00
animation-timing-function: @ease-in-circ;
2015-07-10 14:30:17 +08:00
transform: scale(0, 0);
2015-07-01 17:25:16 +08:00
}
}
.zoom-motion(zoom, zoom);
.zoom-motion(zoom-up, zoomUp);
.zoom-motion(zoom-down, zoomDown);
.zoom-motion(zoom-left, zoomLeft);
.zoom-motion(zoom-right, zoomRight);
@keyframes zoomIn {
0% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(0, 0);
}
100% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
}
}
@keyframes zoomOut {
0% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
}
100% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(0, 0);
}
}
@keyframes zoomUpIn {
0% {
opacity: 0;
transform-origin: 50% 0%;
transform: scale(0, 0);
}
100% {
opacity: 1;
transform-origin: 50% 0%;
transform: scale(1, 1);
}
}
@keyframes zoomUpOut {
0% {
opacity: 1;
transform-origin: 50% 0%;
transform: scale(1, 1);
}
100% {
opacity: 0;
transform-origin: 50% 0%;
transform: scale(0, 0);
}
}
@keyframes zoomLeftIn {
0% {
opacity: 0;
transform-origin: 0% 50%;
transform: scale(0, 0);
}
100% {
opacity: 1;
transform-origin: 0% 50%;
transform: scale(1, 1);
}
}
@keyframes zoomLeftOut {
0% {
opacity: 1;
transform-origin: 0% 50%;
transform: scale(1, 1);
}
100% {
opacity: 0;
transform-origin: 0% 50%;
transform: scale(0, 0);
}
}
@keyframes zoomRightIn {
0% {
opacity: 0;
transform-origin: 100% 50%;
transform: scale(0, 0);
}
100% {
opacity: 1;
transform-origin: 100% 50%;
transform: scale(1, 1);
}
}
@keyframes zoomRightOut {
0% {
opacity: 1;
transform-origin: 100% 50%;
transform: scale(1, 1);
}
100% {
opacity: 0;
transform-origin: 100% 50%;
transform: scale(0, 0);
}
}
@keyframes zoomDownIn {
0% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0, 0);
}
100% {
opacity: 1;
transform-origin: 50% 100%;
transform: scale(1, 1);
}
}
@keyframes zoomDownOut {
0% {
opacity: 1;
transform-origin: 50% 100%;
transform: scale(1, 1);
}
100% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0, 0);
}
2015-07-08 16:29:57 +08:00
}