@import "./motion.less";
.make-motion(zoom, zoom);
.make-motion(zoom-up, zoomUp);
.make-motion(zoom-down, zoomDown);
.make-motion(zoom-left, zoomLeft);
.make-motion(zoom-right, zoomRight);

@keyframes zoomIn {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes zoomOut {
	0% {
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(0);
	}
}

@keyframes zoomUpIn {
	0% {
		opacity: 0;
		transform-origin: 50% 0%;
		transform: scale(.8);
	}
	100% {
		transform-origin: 50% 0%;
		transform: scale(1);
	}
}

@keyframes zoomUpOut {
	0% {
		transform-origin: 50% 0%;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform-origin: 50% 0%;
		transform: scale(.8);
	}
}

@keyframes zoomLeftIn {
	0% {
		opacity: 0;
		transform-origin: 0% 50%;
		transform: scale(.8);
	}
	100% {
		transform-origin: 0% 50%;
		transform: scale(1);
	}
}

@keyframes zoomLeftOut {
	0% {
		transform-origin: 0% 50%;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform-origin: 0% 50%;
		transform: scale(.8);
	}
}

@keyframes zoomRightIn {
	0% {
		opacity: 0;
		transform-origin: 100% 50%;
		transform: scale(.8);
	}
	100% {
		transform-origin: 100% 50%;
		transform: scale(1);
	}
}

@keyframes zoomRightOut {
	0% {
		transform-origin: 100% 50%;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform-origin: 100% 50%;
		transform: scale(.8);
	}
}

@keyframes zoomDownIn {
	0% {
		opacity: 0;
		transform-origin: 50% 100%;
		transform: scale(.8);
	}
	100% {
		transform-origin: 50% 100%;
		transform: scale(1);
	}
}

@keyframes zoomDownOut {
	0% {
		transform-origin: 50% 100%;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform-origin: 50% 100%;
		transform: scale(.8);
	}
}