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

/**
 * @module flip
 * @description 定义翻转动画
 * @method flip-in-x
 */
@-webkit-keyframes flip-in-x {
	0% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		-webkit-transition-timing-function: ease-in;
		opacity: 0;
	}
	40% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		-webkit-transition-timing-function: ease-in;
	}
	60% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		opacity: 1;
	}
	80% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
	}
	100% {
		-webkit-transform: perspective(400px);
	}
}
@keyframes flip-in-x {
	0% {
		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		transition-timing-function: ease-in;
		opacity: 0;
	}
	40% {
		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		transition-timing-function: ease-in;
	}
	60% {
		transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		opacity: 1;
	}
	80% {
		transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
	}
	100% {
		transform: perspective(400px);
	}
}

.ani.flip-in-x {
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip-in-x;
	animation-name: flip-in-x;
}