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

133 lines
2.1 KiB
Plaintext
Raw Normal View History

2015-07-01 17:25:16 +08:00
.zoom-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName);
.@{className}-enter {
2015-07-14 20:26:31 +08:00
transform: scale(0, 0); // need this by yiminghe
2015-08-19 15:46:33 +08:00
animation-timing-function: @ease-out-quint;
2015-07-01 17:25:16 +08:00
}
.@{className}-leave {
2015-08-19 15:46:33 +08:00
animation-timing-function: @ease-in-quint;
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: scale(0, 0);
}
100% {
transform: scale(1, 1);
}
}
@keyframes zoomOut {
0% {
transform: scale(1, 1);
}
100% {
opacity: 0;
transform: scale(0, 0);
}
}
@keyframes zoomUpIn {
0% {
opacity: 0;
transform-origin: 50% 0%;
transform: scale(0, 0);
}
100% {
transform-origin: 50% 0%;
transform: scale(1, 1);
}
}
@keyframes zoomUpOut {
0% {
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% {
transform-origin: 0% 50%;
transform: scale(1, 1);
}
}
@keyframes zoomLeftOut {
0% {
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% {
transform-origin: 100% 50%;
transform: scale(1, 1);
}
}
@keyframes zoomRightOut {
0% {
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% {
transform-origin: 50% 100%;
transform: scale(1, 1);
}
}
@keyframes zoomDownOut {
0% {
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
}