@charset "utf-8";
@import "classes";

/**
 * @module other
 * @description 定义悬挂动画
 * @method hinge
 */
@-webkit-keyframes hinge {
	0% {
		-webkit-transform-origin: top left;
		-webkit-animation-timing-function: ease-in-out;
	}
	20%,
	60% {
		-webkit-transform: rotate3d(0, 0, 1, 80deg);
		-webkit-transform-origin: top left;
		-webkit-animation-timing-function: ease-in-out;
	}
	40%,
	80% {
		-webkit-transform: rotate3d(0, 0, 1, 60deg);
		-webkit-transform-origin: top left;
		-webkit-animation-timing-function: ease-in-out;
		opacity: 1;
	}
	100% {
		-webkit-transform: translate3d(0, 700px, 0);
		opacity: 0;
	}
}
@keyframes hinge {
	0% {
		transform-origin: top left;
		animation-timing-function: ease-in-out;
	}
	20%,
	60% {
		transform: rotate3d(0, 0, 1, 80deg);
		transform-origin: top left;
		animation-timing-function: ease-in-out;
	}
	40%,
	80% {
		transform: rotate3d(0, 0, 1, 60deg);
		transform-origin: top left;
		animation-timing-function: ease-in-out;
		opacity: 1;
	}
	100% {
		transform: translate3d(0, 700px, 0);
		opacity: 0;
	}
}

.ani.hinge {
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-name: hinge;
	animation-name: hinge;
}