ant-design/components/style/core/motion/zoom.less
afc163 0ca6a1c24a css modularize (#1448)
* css modularize

* Add alert style

* Move more component style

* Move iconfont to common style

* Move layout style

* Move more component style

* Move all components

* Fix lots of mixin deps

* remove css-prefix from less

* fix a button icon style bug

* restructure

* fix index

* add dist

* fix jest

* fix some components style

* clean webpack config

* check more components style

* update tabs

* update scripts

* update scripts

* fix form style

* fix more style

* Fix select width

* Fix form and tabs style
2016-04-27 20:44:36 +08:00

156 lines
2.4 KiB
Plaintext

.zoom-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName);
.@{className}-enter,
.@{className}-appear {
transform: scale(0); // need this by yiminghe
animation-timing-function: @ease-out-circ;
}
.@{className}-leave {
animation-timing-function: @ease-in-out-circ;
}
}
.zoom-motion(zoom, antZoom);
.zoom-motion(zoom-big, antZoomBig);
.zoom-motion(zoom-up, antZoomUp);
.zoom-motion(zoom-down, antZoomDown);
.zoom-motion(zoom-left, antZoomLeft);
.zoom-motion(zoom-right, antZoomRight);
@keyframes antZoomIn {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes antZoomOut {
0% {
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0);
}
}
@keyframes antZoomBigIn {
0% {
opacity: 0;
transform: scale(.8);
}
100% {
transform: scale(1);
}
}
@keyframes antZoomBigOut {
0% {
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(.8);
}
}
@keyframes antZoomUpIn {
0% {
opacity: 0;
transform-origin: 50% 0%;
transform: scale(.8);
}
100% {
transform-origin: 50% 0%;
transform: scale(1);
}
}
@keyframes antZoomUpOut {
0% {
transform-origin: 50% 0%;
transform: scale(1);
}
100% {
opacity: 0;
transform-origin: 50% 0%;
transform: scale(.8);
}
}
@keyframes antZoomLeftIn {
0% {
opacity: 0;
transform-origin: 0% 50%;
transform: scale(.8);
}
100% {
transform-origin: 0% 50%;
transform: scale(1);
}
}
@keyframes antZoomLeftOut {
0% {
transform-origin: 0% 50%;
transform: scale(1);
}
100% {
opacity: 0;
transform-origin: 0% 50%;
transform: scale(.8);
}
}
@keyframes antZoomRightIn {
0% {
opacity: 0;
transform-origin: 100% 50%;
transform: scale(.8);
}
100% {
transform-origin: 100% 50%;
transform: scale(1);
}
}
@keyframes antZoomRightOut {
0% {
transform-origin: 100% 50%;
transform: scale(1);
}
100% {
opacity: 0;
transform-origin: 100% 50%;
transform: scale(.8);
}
}
@keyframes antZoomDownIn {
0% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(.8);
}
100% {
transform-origin: 50% 100%;
transform: scale(1);
}
}
@keyframes antZoomDownOut {
0% {
transform-origin: 50% 100%;
transform: scale(1);
}
100% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(.8);
}
}