@import "./motion.less";

.make-motion(slide-up, slideUp);
.make-motion(slide-down, slideDown);
.make-motion(slide-left, slideLeft);
.make-motion(slide-right, slideRight);

/**slide**/
@keyframes slideUpIn {
	0% {
		opacity: 0;
		transform-origin: 0% 0%;
		transform: scaleY(.8);
	}
	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(.8);
	}
}

@keyframes slideDownIn {
	0% {
		opacity: 0;
		transform-origin: 100% 100%;
		transform: scaleY(.8);
	}
	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(.8);
	}
}

@keyframes slideLeftIn {
	0% {
		opacity: 0;
		transform-origin: 0% 0%;
		transform: scaleX(.8);
	}
	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(.8);
	}
}

@keyframes slideRightIn {
	0% {
		opacity: 0;
		transform-origin: 100% 0%;
		transform: scaleX(.8);
	}
	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(.8);
	}
}